diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 10462567c5a..3846d5c0e04 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/**/*.{js,scss}'", - "lint:styles:staged": "stylelint './src/**/*.{js,scss}'", + "lint:styles": "stylelint './src/**/{Examples.*,*.scss}'", + "lint:styles:staged": "stylelint './src/**/{Examples.*,*.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", diff --git a/packages/dnb-design-system-portal/src/docs/contribute/faq.md b/packages/dnb-design-system-portal/src/docs/contribute/faq.md index 9a53dee754c..3d3266e5612 100644 --- a/packages/dnb-design-system-portal/src/docs/contribute/faq.md +++ b/packages/dnb-design-system-portal/src/docs/contribute/faq.md @@ -17,21 +17,6 @@ LINT_STAGED=1 ## Dependency issues -### node-sass vs sass - -The Portal (documentations) uses dart based `sass`, while the bundle and build process of the package `@dnb/eufemia` uses `node-sass` – because: - -- we render sass styles during jest tests with `sass.renderSync` – even that should work with `sass` as well, it can't find the [file it says](https://github.com/sass/dart-sass/issues/710). -- several places a module called `node-sass-once-importer` is used, that is compatible only with `node-sass`. -- it uses `sass-loader` v10 because `TypeError: this.getOptions is not a function`. -- it uses `node-sass` v5, else we get this error message during portal run: - - ``` - ERROR in polyfill - Module not found: TypeError: Cannot read property 'indexOf' of - undefined - ``` - ### puppeteer - When upgrading to a newer version than v8, puppeteer behaves inconsistent. Sometimes the content is just tiny bit off. But most importantly, > v10.4 is very inconsistent and off running on the GitHub Actions maxOS. diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index dcfff23cf76..c59a910ca61 100644 --- a/packages/dnb-eufemia/package.json +++ b/packages/dnb-eufemia/package.json @@ -56,8 +56,8 @@ "lint:js": "yarn lint --fix", "lint:js:staged": "eslint --quiet --fix", "lint:lockfile": "yarn lockfile-lint --path ../../yarn.lock --type yarn --validate-https --allowed-hosts yarn github.com codeload.github.com", - "lint:styles": "stylelint './src/**/*.{js,scss}'", - "lint:styles:staged": "stylelint './{src,scripts}/**/*.{js,scss}'", + "lint:styles": "stylelint './src/**/*{.stories.*,.scss}'", + "lint:styles:staged": "stylelint './src/**/*{.stories.*,.scss}'", "make-properties": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/makeProperties", "publish:ci": "yarn publish:prepare && ./scripts/postbuild/publish-release.sh", "publish:dry": "dotenv semantic-release --no-ci --dry-run", @@ -211,8 +211,6 @@ "markdown-tables-to-json": "0.1.7", "mkdirp": "1.0.4", "mock-match-media": "0.3.0", - "node-sass": "5.0.0", - "node-sass-once-importer": "5.3.2", "nodemon": "2.0.15", "opentype.js": "1.3.4", "ora": "5.4.1", @@ -235,7 +233,7 @@ "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-size-snapshot": "0.12.0", "rollup-plugin-terser": "7.0.2", - "sass": "1.43.4", + "sass": "1.57.1", "sass-loader": "10.2.0", "semantic-release": "19.0.3", "simple-commit-message": "4.1.3", diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js b/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js index 7d86e3fd912..04b86eb1043 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js @@ -4,7 +4,7 @@ */ import gulp from 'gulp' -import sass from 'node-sass' +import sass from 'sass' import clone from 'gulp-clone' import rename from 'gulp-rename' import transform from 'gulp-transform' diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js b/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js index 204928e3646..facc19e6a07 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js @@ -4,8 +4,7 @@ */ import gulp from 'gulp' -import sass from 'node-sass' -import onceImporter from 'node-sass-once-importer' +import sass from 'sass' import clone from 'gulp-clone' import rename from 'gulp-rename' import transform from 'gulp-transform' @@ -35,9 +34,7 @@ export default async function makeMainStyle() { await asyncForEach(listWithThemesToProcess, async (themeFile) => { // in order to keep the folder structure, we have to add these asterisks themeFile = themeFile.replace('/style/themes/', '/style/**/themes/') - await runFactory(themeFile, { - importOnce: false, - }) + await runFactory(themeFile) }) const listWithPackagesToProcess = await globby( @@ -56,7 +53,7 @@ export default async function makeMainStyle() { export const runFactory = ( src, - { returnResult = false, returnFiles = false, importOnce = true } = {} + { returnResult = false, returnFiles = false } = {} ) => new Promise((resolve, reject) => { log.start('> PrePublish: transforming main style') @@ -68,14 +65,7 @@ export const runFactory = ( .src(src, { cwd: ROOT_DIR, }) - .pipe( - transform( - 'utf8', - transformSass({ - importer: importOnce ? [onceImporter()] : [], - }) - ) - ) + .pipe(transform('utf8', transformSass())) .pipe( rename({ extname: '.css', diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/transformUtils.js b/packages/dnb-eufemia/scripts/prebuild/tasks/transformUtils.js index a168b9cb219..e7c1a374a56 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/transformUtils.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/transformUtils.js @@ -1,4 +1,5 @@ -import sass from 'node-sass' +import path from 'path' +import sass from 'sass' import postcss from 'postcss' import cssnano from 'cssnano' import { log } from '../../lib' @@ -21,13 +22,30 @@ export const transformCssnano = (config) => async (content, file) => { export const transformSass = (config) => (content, file) => { log.info(`> PrePublish: sass process | ${file.path}`) + let before + if (typeof window !== 'undefined') { + before = window.location + + delete window.location + window.location = { + href: 'file://', + } + } + + const importPath1 = path.dirname(file.path) + const importPath2 = path.resolve(__dirname, '../../../src/style/core/') + content = sass.renderSync({ - data: content, file: file.path, + includePaths: [importPath1, importPath2], // use loadPaths for new API ...config, }) - return content.css.toString() + if (typeof window !== 'undefined') { + window.location = before + } + + return String(content.css) } export const transformPostcss = (config) => async (content, file) => { 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 23ddd6c9e38..379285de2d7 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 @@ -173,17 +173,17 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` * */ .dnb-accordion__header { - border: none; } - + border: none; +} .dnb-accordion__header__icon, .dnb-accordion__header__container { - color: var(--color-sea-green); } - + color: var(--color-sea-green); +} .dnb-accordion__header__description { - color: var(--color-black-55); } - + color: var(--color-black-55); +} .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title { - font-weight: var(--font-weight-medium); } - + font-weight: var(--font-weight-medium); +} .dnb-accordion__variant--outlined > .dnb-accordion__header { color: var(--color-black-80); background-color: var(--color-white); @@ -191,115 +191,129 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` box-shadow: inset 0 0 0 0.0625rem var(--border-color); /* iOS fix - because "inset" works not fine with border-radius */ /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-accordion__variant--outlined > .dnb-accordion__header { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-accordion__variant--outlined > .dnb-accordion__header { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] { - cursor: not-allowed; } - .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-white); - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] { - cursor: not-allowed; } - .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-pistachio); - --border-color: var(--color-emerald-green); + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-accordion__variant--outlined > .dnb-accordion__header { box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-accordion__variant--outlined > .dnb-accordion__header { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] { + cursor: not-allowed; +} +.dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-white); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] { + cursor: not-allowed; +} +.dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-pistachio); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] { background-color: var(--color-white); --border-color: var(--color-sea-green-30); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * { - color: var(--color-sea-green-30); } - + border-color: transparent; +} +.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * { + color: var(--color-sea-green-30); +} .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header { color: var(--color-white); background-color: var(--color-sea-green); --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] { - background-color: var(--color-sea-green-30); } - .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] * { - color: var(--color-white); } - -html[data-whatinput='keyboard'] -.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - background-color: var(--color-mint-green); } - html[data-whatinput='keyboard'] -.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * { - color: var(--color-emerald-green); } - + background-color: var(--color-sea-green-30); +} +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] * { + color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + background-color: var(--color-mint-green); +} +html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * { + color: var(--color-emerald-green); +} .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - + outline: none; +} +html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * { - color: var(--color-white); } - -html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] { - cursor: not-allowed; } - -html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { + color: var(--color-white); +} +html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { color: var(--color-white); background-color: var(--color-sea-green); --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * { - color: var(--color-white); } -" + color: var(--color-white); +}" `; exports[`Accordion scss have to match snapshot 1`] = ` @@ -314,10 +328,16 @@ exports[`Accordion scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -325,172 +345,224 @@ exports[`Accordion scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Accordion component * */ +/* + * Utilities + */ :root { --accordion-border-width: 0.0625rem; --accordion-border-radius: 0.25rem; - --accordion-easing: var(--easing-default); } + --accordion-easing: var(--easing-default); +} .dnb-accordion { position: relative; display: flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-accordion__header { - display: flex; - align-items: center; - cursor: pointer; - outline: none; - border: var(--accordion-border-width) solid transparent; - border-radius: var(--accordion-border-radius); } - .dnb-accordion__header:focus { - user-select: none; } - .dnb-accordion__header * { - pointer-events: none; } - .dnb-accordion__header--prevent-click { - user-select: none; - pointer-events: none; } - .dnb-accordion__header__wrapper { - display: flex; - flex-direction: column; - width: 100%; - margin: 1.5rem 0 1.5rem 2rem; } - .dnb-accordion__header--description .dnb-accordion__header__wrapper { - margin: 1rem 0 1rem 2rem; } - .dnb-accordion__header__icon + .dnb-accordion__header__wrapper { - margin-left: 0; - margin-right: 2rem; } - .dnb-accordion__header__container { - margin: 0 1rem; } - .dnb-accordion__header__icon { - align-self: flex-start; - margin: 1.5rem 1rem; - font-size: var(--font-size-small); - line-height: var(--line-height-small); - transition: transform 400ms var(--accordion-easing); } - .dnb-accordion__header--description .dnb-accordion__header__icon { - margin-top: 1rem; } - .dnb-accordion__header__icon--right { - justify-content: space-between; } - .dnb-accordion__header__icon--right .dnb-accordion__header__icon { - order: 3; } - .dnb-accordion__header__icon--right .dnb-accordion__header__container { - order: 1; } - .dnb-accordion__header__icon--right .dnb-accordion__header__wrapper { - order: 2; - margin-left: 1rem; - margin-right: 1rem; } - .dnb-accordion__header__icon--right .dnb-accordion__header__wrapper + .dnb-accordion__header__container { - margin-right: 0; } - .dnb-accordion__header__icon--right .dnb-accordion__header__container + .dnb-accordion__header__wrapper { - margin-left: 0; } - .dnb-accordion__header__title { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-accordion__header__description { - font-size: var(--font-size-small); - line-height: var(--line-height-small); - font-weight: var(--font-weight-basis); } - .dnb-accordion__header__title + .dnb-accordion__header__description { - margin-top: 0.25rem; } - .dnb-accordion__header__description + .dnb-accordion__header__title { - margin-top: 0.25rem; } - .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon { - transform: rotate(-180deg); } - .dnb-accordion__content { - display: flex; - width: 100%; - will-change: height; - transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); } - .dnb-accordion__content__inner { - width: 100%; - margin-top: 1rem; } - .dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner { - display: none; } - .dnb-accordion-group--single-container { - transition: min-height 1s var(--accordion-easing); } - .dnb-accordion-group--single-container .dnb-accordion { - position: static; - max-width: 60rem; } - @media screen and (min-width: 40em) { - .dnb-accordion-group--single-container .dnb-accordion__header { - width: 40%; } - .dnb-accordion-group--single-container .dnb-accordion__content { - margin-left: 1rem; - transition: opacity 1s var(--accordion-easing); } - .dnb-accordion-group--single-container .dnb-accordion__content__inner { - margin-top: 0; } } - @media screen and (min-width: 40em) { - .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon { - transform: rotate(-90deg); } } + line-height: var(--line-height-basis); +} +.dnb-accordion__header { + display: flex; + align-items: center; + cursor: pointer; + outline: none; + border: var(--accordion-border-width) solid transparent; + border-radius: var(--accordion-border-radius); +} +.dnb-accordion__header:focus { + user-select: none; +} +.dnb-accordion__header * { + pointer-events: none; +} +.dnb-accordion__header--prevent-click { + user-select: none; + pointer-events: none; +} +.dnb-accordion__header__wrapper { + display: flex; + flex-direction: column; + width: 100%; + margin: 1.5rem 0 1.5rem 2rem; +} +.dnb-accordion__header--description .dnb-accordion__header__wrapper { + margin: 1rem 0 1rem 2rem; +} +.dnb-accordion__header__icon + .dnb-accordion__header__wrapper { + margin-left: 0; + margin-right: 2rem; +} +.dnb-accordion__header__container { + margin: 0 1rem; +} +.dnb-accordion__header__icon { + align-self: flex-start; + margin: 1.5rem 1rem; + font-size: var(--font-size-small); + line-height: var(--line-height-small); + transition: transform 400ms var(--accordion-easing); +} +.dnb-accordion__header--description .dnb-accordion__header__icon { + margin-top: 1rem; +} +.dnb-accordion__header__icon--right { + justify-content: space-between; +} +.dnb-accordion__header__icon--right .dnb-accordion__header__icon { + order: 3; +} +.dnb-accordion__header__icon--right .dnb-accordion__header__container { + order: 1; +} +.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper { + order: 2; + margin-left: 1rem; + margin-right: 1rem; +} +.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper + .dnb-accordion__header__container { + margin-right: 0; +} +.dnb-accordion__header__icon--right .dnb-accordion__header__container + .dnb-accordion__header__wrapper { + margin-left: 0; +} +.dnb-accordion__header__title { + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-accordion__header__description { + font-size: var(--font-size-small); + line-height: var(--line-height-small); + font-weight: var(--font-weight-basis); +} +.dnb-accordion__header__title + .dnb-accordion__header__description { + margin-top: 0.25rem; +} +.dnb-accordion__header__description + .dnb-accordion__header__title { + margin-top: 0.25rem; +} +.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon { + transform: rotate(-180deg); +} +.dnb-accordion__content { + display: flex; + width: 100%; + will-change: height; + transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); +} +.dnb-accordion__content__inner { + width: 100%; + margin-top: 1rem; +} +.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner { + display: none; +} +.dnb-accordion-group--single-container { + transition: min-height 1s var(--accordion-easing); +} +.dnb-accordion-group--single-container .dnb-accordion { + position: static; + max-width: 60rem; +} +@media screen and (min-width: 40em) { + .dnb-accordion-group--single-container .dnb-accordion__header { + width: 40%; + } + .dnb-accordion-group--single-container .dnb-accordion__content { + margin-left: 1rem; + transition: opacity 1s var(--accordion-easing); + } + .dnb-accordion-group--single-container .dnb-accordion__content__inner { + margin-top: 0; + } +} +@media screen and (min-width: 40em) { + .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon { + transform: rotate(-90deg); + } +} +.dnb-accordion-group--single-container .dnb-accordion-group__children { + max-width: 60rem; +} +@media screen and (min-width: 40em) { .dnb-accordion-group--single-container .dnb-accordion-group__children { - max-width: 60rem; } - @media screen and (min-width: 40em) { - .dnb-accordion-group--single-container .dnb-accordion-group__children { - position: relative; - display: flex; - flex-direction: column; } - .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content { - position: absolute; - z-index: 10; - top: 0; - right: 0; - width: 60%; } } - .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon, - html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon { - transition: none; } -" + position: relative; + display: flex; + flex-direction: column; + } + .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content { + position: absolute; + z-index: 10; + top: 0; + right: 0; + width: 60%; + } +} +.dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon, html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon { + transition: none; +}" `; 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 9cded421969..b42e9b46de5 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 @@ -1508,50 +1508,46 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = ` /* * Utilities */ -.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, -.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover -~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { +.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - -.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button, -.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover -~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__submit-button__button { + border-color: transparent; +} +.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button { border-radius: 0; color: var(--color-white); background-color: var(--color-sea-green); - box-shadow: none; } - + box-shadow: none; +} .dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon { - color: transparent; } - + color: transparent; +} .dnb-autocomplete__shell, .dnb-autocomplete__input { - border-radius: var(--autocomplete-border-radius); } - -.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover -~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { + border-radius: var(--autocomplete-border-radius); +} +.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } + border-color: transparent; +} .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) { - font-weight: var(--font-weight-basis); } - + font-weight: var(--font-weight-basis); +} .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) { - color: var(--color-black-55); } - + color: var(--color-black-55); +} .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight { - font-weight: var(--font-weight-bold); } + 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-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); } -" + color: var(--color-white); +}" `; exports[`Autocomplete scss have to match snapshot 1`] = ` @@ -1566,18 +1562,1348 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + +/* +* Button component +* +*/ +/* + * Utilities + */ +:root { + --button-font-size: var(--font-size-basis); + --button-font-size-small: var(--font-size-small); + --button-width: 2.5rem; + --button-height: 2.5rem; + --button-width--small: 1.5rem; + --button-height--small: 1.5rem; + --button-width--medium: 2rem; + --button-height--medium: 2rem; + --button-width--large: 3rem; + --button-height--large: 3rem; + --button-icon-size: 1rem; + --button-border-width: 0.0625rem; + --button-border-width--hover: 0.1875rem; + --button-border-radius: calc(var(--button-height) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); + --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--large: calc(var(--button-height--large) / 2); +} + +.dnb-button { + position: relative; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--button-width); + height: auto; + padding: 0; + border: var(--button-border-width) solid transparent; + border-radius: var(--button-border-radius); + text-decoration: none; + font-size: var(--font-size-small); + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} + +/* Firefox includes a hidden border which messes up button dimensions */ +button.dnb-button::-moz-focus-inner { + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + +/* +* Input component +* +*/ +/* + * Utilities + */ +:root { + --input-font-size: var(--font-size-basis); + --input-font-size--small: var(--font-size-basis); + --input-font-size--medium: var(--font-size-basis); + --input-font-size--large: var(--font-size-medium); + --input-padding: 1rem; + --input-padding--small: 1rem; + --input-padding--medium: 1rem; + --input-padding--large: 1rem; + --input-height: 2rem; + --input-height--small: 1.5rem; + --input-height--medium: 2.5rem; + --input-height--large: 3rem; + --input-border-width: 0.0625rem; + --input-border-radius: 0.25rem; +} + +.dnb-input { + display: inline-flex; + align-items: center; + font-size: var(--input-font-small); + line-height: var(--input-height); + text-align: left; +} +.dnb-input__inner { + display: inline-flex; + flex-direction: column; + width: auto; +} +.dnb-input__shell { + position: relative; + display: flex; + align-items: center; + border: var(--input-border-width) solid var(--color-sea-green); +} +.dnb-input__input { + border: none; + outline: none; + word-break: normal; + position: relative; + z-index: 2; +} +.dnb-input__input[disabled] { + user-select: none; + -webkit-user-select: none; + opacity: 1; +} +.dnb-input__shell, .dnb-input__input { + height: var(--input-height); + border-radius: var(--input-border-radius); +} +.dnb-input__placeholder, .dnb-input__input { + width: 100%; + padding-left: var(--input-padding); + padding-right: var(--input-padding); +} +.dnb-input__placeholder, .dnb-input__input, +.dnb-input input.dnb-input__input { + padding-top: 0; + padding-bottom: 0; + color: inherit; + background-color: transparent; + font-size: var(--input-font-size); + line-height: inherit; +} +.dnb-input__placeholder { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.dnb-input input.dnb-input__input[type=file] { + line-height: calc(var(--input-height) - 2px); +} +.dnb-input__input::-webkit-search-cancel-button { + display: none; +} +.dnb-input__input::-ms-clear { + display: none; +} +.dnb-input ::-webkit-file-upload-button { + cursor: pointer; + outline: none; + color: var(--color-sea-green); +} +.dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { + color: var(--color-emerald-green); +} +.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--has-submit-element .dnb-input__input, .dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding) * 2.5); +} +.dnb-input--password .dnb-input__placeholder, .dnb-input--password .dnb-input__input { + margin-right: 2.5rem; + padding-right: 0; +} +.dnb-input--password .dnb-input__placeholder::-ms-clear, .dnb-input--password .dnb-input__input::-ms-clear { + display: none; +} +.dnb-input--password .dnb-input__placeholder::-ms-reveal, .dnb-input--password .dnb-input__input::-ms-reveal { + display: none; +} +.dnb-input--password .dnb-input__placeholder { + padding-right: 4rem; +} +.dnb-input--password .dnb-input__input { + font-family: var(--font-family-monospace); +} +.dnb-input__row { + display: inline-flex; + align-items: center; +} +.dnb-input__suffix { + color: inherit; +} +.dnb-input__submit-element { + z-index: 3; + margin-left: calc(0px - var(--input-height)); + line-height: var(--line-height-basis); +} +.dnb-input__submit-button { + position: relative; + align-self: center; /* IE needs this to stay centered */ +} +.dnb-input__submit-button__button { + border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; +} +.dnb-input > .dnb-form-label { + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-input { + flex-wrap: wrap; + } + .dnb-input > .dnb-form-label { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +.dnb-input--small { + line-height: var(--input-height--small); +} +.dnb-input--small .dnb-input__shell, +.dnb-input--small .dnb-input__input { + height: var(--input-height--small); +} +.dnb-input--small .dnb-input__placeholder, +.dnb-input--small .dnb-input__input { + padding-left: var(--input-padding--small); + padding-right: var(--input-padding--small); + font-size: var(--input-font-size--small); +} +.dnb-input--small .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--small)); +} +.dnb-input--small .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--small); + height: var(--input-height--small); + line-height: var(--input-height--small); +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--small) * 2); +} +.dnb-input--medium { + line-height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__shell, +.dnb-input--medium .dnb-input__input { + height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__placeholder, +.dnb-input--medium .dnb-input__input { + padding-left: var(--input-padding--medium); + padding-right: var(--input-padding--medium); + font-size: var(--input-font-size--medium); +} +.dnb-input--medium .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--medium)); +} +.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--medium); + height: var(--input-height--medium); + line-height: var(--input-height--medium); +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--medium) * 3); +} +.dnb-input--large { + line-height: var(--input-height--large); +} +.dnb-input--large .dnb-input__shell, +.dnb-input--large .dnb-input__input { + height: var(--input-height--large); +} +.dnb-input--large .dnb-input__placeholder, +.dnb-input--large .dnb-input__input { + padding-left: var(--input-padding--large); + padding-right: var(--input-padding--large); + font-size: var(--input-font-size--large); +} +.dnb-input--large .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large)); +} +.dnb-input--large .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--large); + height: var(--input-height--large); +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--large) * 3); +} +.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large) + 0.5rem); +} +.dnb-input__align--center .dnb-input__placeholder, .dnb-input__align--center .dnb-input__input { + text-align: center; +} +.dnb-input__align--right .dnb-input__placeholder, .dnb-input__align--right .dnb-input__input { + text-align: right; +} +.dnb-input--clear.dnb-input__submit-element { + opacity: 0; + transition: opacity 200ms ease-in-out; +} +.dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); + border-radius: var(--button-border-radius); +} +.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { + margin: auto; +} +html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { + cursor: default; +} +.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: 1rem; + height: 1rem; +} +.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); +} +.dnb-input[data-has-content=true] .dnb-input--clear { + opacity: 1; +} +.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2.5rem; +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2rem; +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3rem; +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3.5rem; +} +.dnb-input__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-input--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-input--stretch { + display: flex; + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner { + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { + width: 100%; +} +.dnb-input--stretch .dnb-form-label + .dnb-input__inner { + width: auto; +} +.dnb-input--vertical.dnb-input--stretch .dnb-input__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-input--stretch { + width: 100%; +} +.dnb-input__icon { + order: 0; + position: absolute; + left: 1rem; + right: auto; + top: 0; + bottom: 0; + margin: auto; +} +.dnb-input--icon-position-right .dnb-input__icon { + order: 1; + left: auto; + right: 1rem; +} +.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 2.5rem; +} +.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 2.5rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 3rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 3rem; +} +html[data-visual-test] .dnb-input__input { + caret-color: var(--color-white); +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-input { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-input__row { + align-items: flex-start; + } + .dnb-responsive-component .dnb-input > .dnb-form-label { + margin-bottom: 0.5rem; + } +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1585,63 +2911,81 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1652,156 +2996,205 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1819,7 +3212,8 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1837,164 +3231,214 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -2005,312 +3449,124 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* -* Input component +* Used for snapshot testing * */ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ :root { - --input-font-size: var(--font-size-basis); - --input-font-size--small: var(--font-size-basis); - --input-font-size--medium: var(--font-size-basis); - --input-font-size--large: var(--font-size-medium); - --input-padding: 1rem; - --input-padding--small: 1rem; - --input-padding--medium: 1rem; - --input-padding--large: 1rem; - --input-height: 2rem; - --input-height--small: 1.5rem; - --input-height--medium: 2.5rem; - --input-height--large: 3rem; - --input-border-width: 0.0625rem; - --input-border-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} -.dnb-input { - display: inline-flex; +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; align-items: center; - font-size: var(--input-font-small); - line-height: var(--input-height); - text-align: left; } - .dnb-input__inner { - display: inline-flex; - flex-direction: column; - width: auto; } - .dnb-input__shell { - position: relative; - display: flex; - align-items: center; - border: var(--input-border-width) solid var(--color-sea-green); } - .dnb-input__input { - border: none; - outline: none; - word-break: normal; - position: relative; - z-index: 2; } - .dnb-input__input[disabled] { - user-select: none; - -webkit-user-select: none; - opacity: 1; } - .dnb-input__shell, .dnb-input__input { - height: var(--input-height); - border-radius: var(--input-border-radius); } - .dnb-input__placeholder, .dnb-input__input { - width: 100%; - padding-left: var(--input-padding); - padding-right: var(--input-padding); } - .dnb-input__placeholder, .dnb-input__input, - .dnb-input input.dnb-input__input { - padding-top: 0; - padding-bottom: 0; - color: inherit; - background-color: transparent; - font-size: var(--input-font-size); - line-height: inherit; } - .dnb-input__placeholder { - pointer-events: none; - position: absolute; - z-index: 1; - top: 0; - left: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - .dnb-input input.dnb-input__input[type='file'] { - line-height: calc(var(--input-height) - 2px); } - .dnb-input__input::-webkit-search-cancel-button { - display: none; } - .dnb-input__input::-ms-clear { - display: none; } - .dnb-input ::-webkit-file-upload-button { - cursor: pointer; - outline: none; - color: var(--color-sea-green); } - .dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { - color: var(--color-emerald-green); } - .dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--has-submit-element .dnb-input__input, - .dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding) * 2.5); } - .dnb-input--password .dnb-input__placeholder, - .dnb-input--password .dnb-input__input { - margin-right: 2.5rem; - padding-right: 0; } - .dnb-input--password .dnb-input__placeholder::-ms-clear, - .dnb-input--password .dnb-input__input::-ms-clear { - display: none; } - .dnb-input--password .dnb-input__placeholder::-ms-reveal, - .dnb-input--password .dnb-input__input::-ms-reveal { - display: none; } - .dnb-input--password .dnb-input__placeholder { - padding-right: 4rem; } - .dnb-input--password .dnb-input__input { - font-family: var(--font-family-monospace); } - .dnb-input__row { - display: inline-flex; - align-items: center; } - .dnb-input__suffix { - color: inherit; } - .dnb-input__submit-element { - z-index: 3; - margin-left: calc(1px - 1px - var(--input-height)); - line-height: var(--line-height-basis); } - .dnb-input__submit-button { - position: relative; - align-self: center; - /* IE needs this to stay centered */ } - .dnb-input__submit-button__button { - border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } - .dnb-input > .dnb-form-label { - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-input { - flex-wrap: wrap; } - .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - .dnb-input--small { - line-height: var(--input-height--small); } - .dnb-input--small .dnb-input__shell, - .dnb-input--small .dnb-input__input { - height: var(--input-height--small); } - .dnb-input--small .dnb-input__placeholder, - .dnb-input--small .dnb-input__input { - padding-left: var(--input-padding--small); - padding-right: var(--input-padding--small); - font-size: var(--input-font-size--small); } - .dnb-input--small .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--small)); } - .dnb-input--small .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--small); - height: var(--input-height--small); - line-height: var(--input-height--small); } - .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--small) * 2); } - .dnb-input--medium { - line-height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__shell, - .dnb-input--medium .dnb-input__input { - height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__placeholder, - .dnb-input--medium .dnb-input__input { - padding-left: var(--input-padding--medium); - padding-right: var(--input-padding--medium); - font-size: var(--input-font-size--medium); } - .dnb-input--medium .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--medium)); } - .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--medium); - height: var(--input-height--medium); - line-height: var(--input-height--medium); } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--medium) * 3); } - .dnb-input--large { - line-height: var(--input-height--large); } - .dnb-input--large .dnb-input__shell, - .dnb-input--large .dnb-input__input { - height: var(--input-height--large); } - .dnb-input--large .dnb-input__placeholder, - .dnb-input--large .dnb-input__input { - padding-left: var(--input-padding--large); - padding-right: var(--input-padding--large); - font-size: var(--input-font-size--large); } - .dnb-input--large .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large)); } - .dnb-input--large .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--large); - height: var(--input-height--large); } - .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--large) * 3); } - .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large) + 0.5rem); } - .dnb-input__align--center .dnb-input__placeholder, - .dnb-input__align--center .dnb-input__input { - text-align: center; } - .dnb-input__align--right .dnb-input__placeholder, - .dnb-input__align--right .dnb-input__input { - text-align: right; } - .dnb-input--clear.dnb-input__submit-element { - opacity: 0; - transition: opacity 200ms ease-in-out; } - .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); - border-radius: var(--button-border-radius); } - .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { - margin: auto; } - html:not([data-whatintent='touch']) -.dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { - cursor: default; } - .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: 1rem; - height: 1rem; } - .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, - .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); } - .dnb-input[data-has-content='true'] .dnb-input--clear { - opacity: 1; } - .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2.5rem; } - .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2rem; } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3rem; } - .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3.5rem; } - .dnb-input__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-input--vertical { - display: flex; - flex-direction: column; - align-items: flex-start; } - .dnb-input--stretch { - display: flex; - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner { - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { - width: 100%; } - .dnb-input--stretch .dnb-form-label + .dnb-input__inner { - width: auto; } - .dnb-input--vertical.dnb-input--stretch .dnb-input__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-input--stretch { - width: 100%; } - .dnb-input__icon { - order: 0; - position: absolute; - left: 1rem; - right: auto; - top: 0; - bottom: 0; - margin: auto; } - .dnb-input--icon-position-right .dnb-input__icon { - order: 1; - left: auto; - right: 1rem; } - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 2.5rem; } - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 2.5rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 3rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 3rem; } - html[data-visual-test] .dnb-input__input { - caret-color: var(--color-white); } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-input { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-input__row { - align-items: flex-start; } - .dnb-responsive-component .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; } } + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} -/* -* Used for snapshot testing -* -*/ /* * Dropdown component * */ +/* + * Utilities + */ :root { --dropdown-width: 16rem; --dropdown-height: 2rem; @@ -2320,356 +3576,464 @@ legend.dnb-form-label { --dropdown-padding-horizontal: 1rem; --dropdown-focus-border-width: 0.125rem; --dropdown-text-padding: 0.5rem; - --dropdown-border-radius: 0.25rem; } + --dropdown-border-radius: 0.25rem; +} .dnb-dropdown { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--dropdown-height); } - .dnb-dropdown__inner { - display: inline-flex; - flex-direction: column; - margin: 0; - padding: 0; - width: auto; - color: inherit; } - .dnb-dropdown__shell { - position: relative; - width: var(--dropdown-width); - height: var(--dropdown-height); - margin: 0; - padding: 0; - color: inherit; } - .dnb-dropdown__row { - display: inline-flex; } - .dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); } - .dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); } - .dnb-dropdown__icon { - position: relative; - order: 2; - display: inline-flex; - justify-content: center; - pointer-events: none; } - .dnb-dropdown__trigger { - position: relative; - z-index: 1; - user-select: none; - -webkit-user-select: none; - width: 100%; } - .dnb-dropdown__trigger.dnb-button { - padding: 0 1rem; - border-radius: var(--dropdown-border-radius); } - .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button { - padding: 0; - border-radius: 50%; } - .dnb-dropdown__text { - order: 1; - position: relative; - z-index: 4; - display: inline-block; - width: 100%; - overflow: hidden; - color: inherit; - text-align: left; - text-overflow: ellipsis; - line-height: inherit; - font-size: var(--font-size-basis); } - .dnb-dropdown__text__inner { - display: inherit; - overflow: hidden; - white-space: nowrap; - text-overflow: inherit; } - .dnb-dropdown--icon-position-left .dnb-dropdown__text { - order: 2; - padding-right: 0; - padding-left: var(--dropdown-text-padding); } - .dnb-dropdown--icon-position-left .dnb-dropdown__icon { - order: 1; } - .dnb-dropdown--icon-position-right .dnb-dropdown__text { - padding-right: var(--dropdown-text-padding); } - .dnb-dropdown--independent-width .dnb-dropdown__shell { - width: auto; } - @media screen and (max-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button { - padding-left: 0.5rem; - padding-right: 0.5rem; - border-radius: 50%; } } - @media screen and (min-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { - padding: 0 0.5rem; } } - @media screen and (max-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { - width: 0; - padding: 0; } } - .dnb-dropdown--icon-position-left .dnb-button--tertiary -~ .dnb-drawer-list__root--portal { - left: -0.5rem; } - .dnb-dropdown--icon-position-right .dnb-button--tertiary -~ .dnb-drawer-list__root--portal { - left: 0.5rem; } - .dnb-dropdown .dnb-button--tertiary.dnb-button--active { - box-shadow: none; } - .dnb-dropdown .dnb-button--tertiary .dnb-button__text { - margin: 0 0.5rem; } - .dnb-dropdown .dnb-button--tertiary .dnb-button__text::after { - bottom: 0; } - .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, - .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text { - padding: 0; } - .dnb-dropdown .dnb-button--tertiary:focus::before { - left: 0 !important; - right: 0 !important; } - .dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--is-popup .dnb-dropdown__trigger { + line-height: var(--dropdown-height); +} +.dnb-dropdown__inner { + display: inline-flex; + flex-direction: column; + margin: 0; + padding: 0; + width: auto; + color: inherit; +} +.dnb-dropdown__shell { + position: relative; + width: var(--dropdown-width); + height: var(--dropdown-height); + margin: 0; + padding: 0; + color: inherit; +} +.dnb-dropdown__row { + display: inline-flex; +} +.dnb-dropdown--large .dnb-drawer-list__triangle { + margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); +} +.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { + margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); +} +.dnb-dropdown__icon { + position: relative; + order: 2; + display: inline-flex; + justify-content: center; + pointer-events: none; +} +.dnb-dropdown__trigger { + position: relative; + z-index: 1; + user-select: none; + -webkit-user-select: none; + width: 100%; +} +.dnb-dropdown__trigger.dnb-button { + padding: 0 1rem; + border-radius: var(--dropdown-border-radius); +} +.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button { + padding: 0; + border-radius: 50%; +} +.dnb-dropdown__text { + order: 1; + position: relative; + z-index: 4; + display: inline-block; + width: 100%; + overflow: hidden; + color: inherit; + text-align: left; + text-overflow: ellipsis; + line-height: inherit; + font-size: var(--font-size-basis); +} +.dnb-dropdown__text__inner { + display: inherit; + overflow: hidden; + white-space: nowrap; + text-overflow: inherit; +} +.dnb-dropdown--icon-position-left .dnb-dropdown__text { + order: 2; + padding-right: 0; + padding-left: var(--dropdown-text-padding); +} +.dnb-dropdown--icon-position-left .dnb-dropdown__icon { + order: 1; +} +.dnb-dropdown--icon-position-right .dnb-dropdown__text { + padding-right: var(--dropdown-text-padding); +} +.dnb-dropdown--independent-width .dnb-dropdown__shell { + width: auto; +} +@media screen and (max-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button { + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 50%; + } +} +@media screen and (min-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { + padding: 0 0.5rem; + } +} +@media screen and (max-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { + width: 0; padding: 0; - width: var(--dropdown-height); - height: var(--dropdown-height); } - .dnb-dropdown--is-popup .dnb-dropdown__icon { - width: 100%; } - .dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options { - min-height: 1rem; } - .dnb-dropdown--is-popup .dnb-drawer-list__root { - width: var(--dropdown-width); } - .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--small); } - .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--medium); } - .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--large); } - .dnb-dropdown--small .dnb-dropdown__shell, - .dnb-dropdown--small .dnb-dropdown__trigger { - height: var(--dropdown-height--small); } - .dnb-dropdown--small, - .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--small); } - .dnb-dropdown--medium .dnb-dropdown__shell, - .dnb-dropdown--medium .dnb-dropdown__trigger { - height: var(--dropdown-height--medium); } - .dnb-dropdown--medium, - .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--medium); } - .dnb-dropdown--large .dnb-dropdown__shell, - .dnb-dropdown--large .dnb-dropdown__trigger { - height: var(--dropdown-height--large); } - .dnb-dropdown--large, - .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--large); } - .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text { - line-height: var(--line-height-basis); } + } +} +.dnb-dropdown--icon-position-left .dnb-button--tertiary ~ .dnb-drawer-list__root--portal { + left: -0.5rem; +} +.dnb-dropdown--icon-position-right .dnb-button--tertiary ~ .dnb-drawer-list__root--portal { + left: 0.5rem; +} +.dnb-dropdown .dnb-button--tertiary.dnb-button--active { + box-shadow: none; +} +.dnb-dropdown .dnb-button--tertiary .dnb-button__text { + margin: 0 0.5rem; +} +.dnb-dropdown .dnb-button--tertiary .dnb-button__text::after { + bottom: 0; +} +.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text { + padding: 0; +} +.dnb-dropdown .dnb-button--tertiary:focus::before { + left: 0 !important; + right: 0 !important; +} +.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--is-popup .dnb-dropdown__trigger { + padding: 0; + width: var(--dropdown-height); + height: var(--dropdown-height); +} +.dnb-dropdown--is-popup .dnb-dropdown__icon { + width: 100%; +} +.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options { + min-height: 1rem; +} +.dnb-dropdown--is-popup .dnb-drawer-list__root { + width: var(--dropdown-width); +} +.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--small); +} +.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--medium); +} +.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--large); +} +.dnb-dropdown--small .dnb-dropdown__shell, .dnb-dropdown--small .dnb-dropdown__trigger { + height: var(--dropdown-height--small); +} +.dnb-dropdown--small, .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--small); +} +.dnb-dropdown--medium .dnb-dropdown__shell, .dnb-dropdown--medium .dnb-dropdown__trigger { + height: var(--dropdown-height--medium); +} +.dnb-dropdown--medium, .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--medium); +} +.dnb-dropdown--large .dnb-dropdown__shell, .dnb-dropdown--large .dnb-dropdown__trigger { + height: var(--dropdown-height--large); +} +.dnb-dropdown--large, .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--large); +} +.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text { + line-height: var(--line-height-basis); +} +.dnb-dropdown > .dnb-form-label { + margin-right: 1rem; + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-dropdown { + flex-wrap: wrap; + } .dnb-dropdown > .dnb-form-label { - margin-right: 1rem; - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-dropdown { - flex-wrap: wrap; } - .dnb-dropdown > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-dropdown--stretch { - display: flex; - flex-grow: 1; } - .dnb-dropdown--stretch .dnb-dropdown__inner { - flex-grow: 1; } - .dnb-dropdown--stretch .dnb-dropdown__row, .dnb-dropdown--stretch .dnb-dropdown__inner, .dnb-dropdown--stretch .dnb-dropdown__shell { - width: 100%; } - .dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner { - width: auto; } - .dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-dropdown--stretch { - width: 100%; } - label + .dnb-dropdown[class*='__form-status'] { - vertical-align: top; } - label + .dnb-dropdown[class*='__form-status'] .dnb-dropdown__shell { - top: -0.375rem; } - .dnb-dropdown__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-dropdown--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-dropdown--stretch { + display: flex; + flex-grow: 1; +} +.dnb-dropdown--stretch .dnb-dropdown__inner { + flex-grow: 1; +} +.dnb-dropdown--stretch .dnb-dropdown__row, .dnb-dropdown--stretch .dnb-dropdown__inner, .dnb-dropdown--stretch .dnb-dropdown__shell { + width: 100%; +} +.dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner { + width: auto; +} +.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-dropdown--stretch { + width: 100%; +} +label + .dnb-dropdown[class*=__form-status] { + vertical-align: top; +} +label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell { + top: -0.375rem; +} +.dnb-dropdown__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-dropdown--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-dropdown { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-dropdown { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-dropdown > .dnb-form-label { - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-dropdown__helper { - display: none; } } + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-dropdown > .dnb-form-label { + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-dropdown__helper { + display: none; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * ProgressIndicator component * */ +/* + * Utilities + */ :root { --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99); --progress-indicator-circular-circle: 88; --progress-indicator-circular-circle-offset--min: 88; - --progress-indicator-circular-circle-offset--max: 1; } + --progress-indicator-circular-circle-offset--max: 1; +} .dnb-progress-indicator { position: relative; display: inline-flex; - align-items: center; } - .dnb-progress-indicator--vertical { - flex-direction: column; } - .dnb-progress-indicator--horizontal { - justify-content: center; } - .dnb-progress-indicator__label { - display: inline-flex; } - .dnb-progress-indicator__label .dnb-p { - align-self: center; } - .dnb-spacing .dnb-progress-indicator .dnb-p, - .dnb-spacing .dnb-progress-indicator .dnb-p:not([class*='dnb-space']) { - margin: 0; } - .dnb-progress-indicator--horizontal .dnb-progress-indicator__label { - margin: 0 1rem; } - .dnb-progress-indicator--vertical .dnb-progress-indicator__label { - margin-top: 0.5rem; } - .dnb-progress-indicator__circular { - position: relative; - width: 2rem; - height: 2rem; - transform: rotate(-90deg); } - .dnb-progress-indicator__circular svg { - position: absolute; - width: 100%; - height: 100%; } - .dnb-progress-indicator__circular__line { - animation-duration: 2s; - animation-delay: 200ms; - animation-timing-function: var(--progress-indicator-timing); - animation-iteration-count: infinite; } - .dnb-progress-indicator__circular__line.background { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.light { - animation-name: progress-indicator-circular-line-light; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.dark { - animation-name: progress-indicator-circular-line-dark; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } - .dnb-progress-indicator__circular__line.paused { - animation-play-state: paused; } - .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { - transition: stroke-dashoffset 600ms var(--progress-indicator-timing); } - .dnb-progress-indicator__circular__circle { - stroke-linecap: round; } - .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { - stroke: grey; } - .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke: var(--color-black); } - .dnb-progress-indicator__linear { - position: relative; - overflow: hidden; - width: 100%; - will-change: transform; - height: 0.5rem; - border-radius: 0.25rem; } - .dnb-progress-indicator__linear__bar { - width: 100%; - position: absolute; - left: 0; - bottom: 0; - top: 0; - transform-origin: left; - border-radius: inherit; } - .dnb-progress-indicator__linear__bar-transition { - transition: transform 0.2s linear; } - .dnb-progress-indicator__linear__bar1-animation { - width: auto; - animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } - .dnb-progress-indicator__linear__bar2-animation { - width: auto; - animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; } - .dnb-progress-indicator, .dnb-progress-indicator--visible { - opacity: 0; - animation: progress-indicator-fade-in 200ms ease-out 1 forwards; } - .dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { - animation: progress-indicator-fade-out 600ms ease-out 1 forwards; } - .dnb-progress-indicator--no-animation { - animation-duration: 0ms; } - html[data-visual-test] .dnb-progress-indicator__circular__line { - animation-duration: 0ms; - animation-iteration-count: 0; } - html[data-visual-test] .dnb-progress-indicator__bar-transition { - transition: none; } - .dnb-progress-indicator--full-width { - width: 100%; - min-width: 1rem; } + align-items: center; +} +.dnb-progress-indicator--vertical { + flex-direction: column; +} +.dnb-progress-indicator--horizontal { + justify-content: center; +} +.dnb-progress-indicator__label { + display: inline-flex; +} +.dnb-progress-indicator__label .dnb-p { + align-self: center; +} +.dnb-spacing .dnb-progress-indicator .dnb-p, +.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]) { + margin: 0; +} +.dnb-progress-indicator--horizontal .dnb-progress-indicator__label { + margin: 0 1rem; +} +.dnb-progress-indicator--vertical .dnb-progress-indicator__label { + margin-top: 0.5rem; +} +.dnb-progress-indicator__circular { + position: relative; + width: 2rem; + height: 2rem; + transform: rotate(-90deg); +} +.dnb-progress-indicator__circular svg { + position: absolute; + width: 100%; + height: 100%; +} +.dnb-progress-indicator__circular__line { + animation-duration: 2s; + animation-delay: 200ms; + animation-timing-function: var(--progress-indicator-timing); + animation-iteration-count: infinite; +} +.dnb-progress-indicator__circular__line.background { + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.light { + animation-name: progress-indicator-circular-line-light; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.dark { + animation-name: progress-indicator-circular-line-dark; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); +} +.dnb-progress-indicator__circular__line.paused { + animation-play-state: paused; +} +.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { + transition: stroke-dashoffset 600ms var(--progress-indicator-timing); +} +.dnb-progress-indicator__circular__circle { + stroke-linecap: round; +} +.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { + stroke: grey; +} +.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { + stroke: var(--color-black); +} +.dnb-progress-indicator__linear { + position: relative; + overflow: hidden; + width: 100%; + will-change: transform; + height: 0.5rem; + border-radius: 0.25rem; +} +.dnb-progress-indicator__linear__bar { + width: 100%; + position: absolute; + left: 0; + bottom: 0; + top: 0; + transform-origin: left; + border-radius: inherit; +} +.dnb-progress-indicator__linear__bar-transition { + transition: transform 0.2s linear; +} +.dnb-progress-indicator__linear__bar1-animation { + width: auto; + animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} +.dnb-progress-indicator__linear__bar2-animation { + width: auto; + animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; +} +.dnb-progress-indicator, .dnb-progress-indicator--visible { + opacity: 0; + animation: progress-indicator-fade-in 200ms ease-out 1 forwards; +} +.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { + animation: progress-indicator-fade-out 600ms ease-out 1 forwards; +} +.dnb-progress-indicator--no-animation { + animation-duration: 0ms; +} +html[data-visual-test] .dnb-progress-indicator__circular__line { + animation-duration: 0ms; + animation-iteration-count: 0; +} +html[data-visual-test] .dnb-progress-indicator__bar-transition { + transition: none; +} +.dnb-progress-indicator--full-width { + width: 100%; + min-width: 1rem; +} @keyframes progress-indicator-fade-in { 0% { - opacity: 0; } + opacity: 0; + } 100% { - opacity: 1; } } - + opacity: 1; + } +} @keyframes progress-indicator-fade-out { 0% { - opacity: 1; } + opacity: 1; + } 100% { - opacity: 0; } } + opacity: 0; + } +} @keyframes progress-indicator-circular-line-light { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-circular-line-dark { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-linear-bar-1 { 0% { left: -35%; - right: 100%; } + right: 100%; + } 60% { left: 100%; - right: -90%; } + right: -90%; + } 100% { left: 100%; - right: -90%; } } - + right: -90%; + } +} @keyframes progress-indicator-linear-bar-2 { 0% { left: -200%; - right: 100%; } + right: 100%; + } 60% { left: 107%; - right: -8%; } + right: -8%; + } 100% { left: 107%; - right: -8%; } } - + right: -8%; + } +} /* * Autocomplete component * */ +/* + * Utilities + */ :root { --autocomplete-width: 16rem; --autocomplete-height: 2rem; @@ -2679,180 +4043,235 @@ legend.dnb-form-label { --autocomplete-padding-horizontal: 1rem; --autocomplete-focus-border-width: 0.125rem; --autocomplete-text-padding: 0.5rem; - --autocomplete-border-radius: 0.25rem; } + --autocomplete-border-radius: 0.25rem; +} .dnb-autocomplete { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--autocomplete-height); } - .dnb-autocomplete__inner { - display: inline-flex; - flex-direction: column; - margin: 0; - padding: 0; - width: auto; - color: inherit; } - .dnb-autocomplete--right .dnb-autocomplete__inner { - align-items: flex-end; } - .dnb-autocomplete__shell { - position: relative; - width: var(--autocomplete-width); - margin: 0; - padding: 0; - color: inherit; } - .dnb-autocomplete__row { - display: inline-flex; - align-items: center; } - .dnb-autocomplete--small { - line-height: var(--autocomplete-height--small); } - .dnb-autocomplete--medium { - line-height: var(--autocomplete-height--medium); } - .dnb-autocomplete--large { - line-height: var(--autocomplete-height--large); } - .dnb-autocomplete__icon { - display: inline-flex; - justify-content: center; - pointer-events: none; } - .dnb-autocomplete__show-all .dnb-drawer-list__option__inner { - display: flex; - justify-content: center; - align-items: center; - color: var(--color-sea-green); } - .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item { - display: flex; - flex-direction: column; } - .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon { - align-self: center; } - .dnb-autocomplete__input { - display: inline-flex; - align-items: center; - outline: none; } - .dnb-autocomplete__input, - .dnb-autocomplete__input .dnb-input__inner, - .dnb-autocomplete__input .dnb-input__shell, - .dnb-autocomplete__input .dnb-input__input { - width: 100%; } - .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon { - transform: rotate(180deg); - transform-origin: 50% 50%; } + line-height: var(--autocomplete-height); +} +.dnb-autocomplete__inner { + display: inline-flex; + flex-direction: column; + margin: 0; + padding: 0; + width: auto; + color: inherit; +} +.dnb-autocomplete--right .dnb-autocomplete__inner { + align-items: flex-end; +} +.dnb-autocomplete__shell { + position: relative; + width: var(--autocomplete-width); + margin: 0; + padding: 0; + color: inherit; +} +.dnb-autocomplete__row { + display: inline-flex; + align-items: center; +} +.dnb-autocomplete--small { + line-height: var(--autocomplete-height--small); +} +.dnb-autocomplete--medium { + line-height: var(--autocomplete-height--medium); +} +.dnb-autocomplete--large { + line-height: var(--autocomplete-height--large); +} +.dnb-autocomplete__icon { + display: inline-flex; + justify-content: center; + pointer-events: none; +} +.dnb-autocomplete__show-all .dnb-drawer-list__option__inner { + display: flex; + justify-content: center; + align-items: center; + color: var(--color-sea-green); +} +.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item { + display: flex; + flex-direction: column; +} +.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon { + align-self: center; +} +.dnb-autocomplete__input { + display: inline-flex; + align-items: center; + outline: none; +} +.dnb-autocomplete__input, +.dnb-autocomplete__input .dnb-input__inner, +.dnb-autocomplete__input .dnb-input__shell, +.dnb-autocomplete__input .dnb-input__input { + width: 100%; +} +.dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon { + transform: rotate(180deg); + transform-origin: 50% 50%; +} +.dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { + --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 */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { - --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 */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { - transition: transform 400ms ease-out; } - html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { - transition-duration: 1ms !important; } - .dnb-autocomplete .dnb-input__inner__element { - position: relative; - z-index: 3; - cursor: text; } - @media screen and (min-width: 40em) { - .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, - .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input { - padding-right: 0 !important; } } - @media screen and (max-width: 40em) { - .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, - .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input { - padding-right: 2.5rem !important; } } + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +.dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { + transition: transform 400ms ease-out; +} +html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { + transition-duration: 1ms !important; +} +.dnb-autocomplete .dnb-input__inner__element { + position: relative; + z-index: 3; + cursor: text; +} +@media screen and (min-width: 40em) { + .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input { + padding-right: 0 !important; + } +} +@media screen and (max-width: 40em) { + .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input { + padding-right: 2.5rem !important; + } +} +.dnb-autocomplete .dnb-input__inner__element.dnb-p { + white-space: nowrap; + padding: 0 0.5rem; +} +@media screen and (max-width: 40em) { .dnb-autocomplete .dnb-input__inner__element.dnb-p { - white-space: nowrap; - padding: 0 0.5rem; } - @media screen and (max-width: 40em) { - .dnb-autocomplete .dnb-input__inner__element.dnb-p { - display: none; } } - .dnb-autocomplete .dnb-input__inner__element.dnb-p, - .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p { - margin: 0; } - .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element { - margin-right: 2.5rem !important; } - .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p { - padding-right: 3rem; } - .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input { - padding-right: 1rem; } - .dnb-autocomplete--disabled .dnb-input__inner__element { - cursor: not-allowed; } - .dnb-autocomplete__text { - order: 1; - position: relative; - z-index: 4; - width: 100%; - height: inherit; - line-height: inherit; - padding: 0 var(--autocomplete-text-padding) 0 0; - overflow: hidden; - color: inherit; - text-align: left; - text-overflow: ellipsis; - font-size: var(--font-size-basis); } - .dnb-autocomplete__text__inner { - display: inline-block; - width: 100%; - height: inherit; - padding: 0; - overflow: hidden; - white-space: nowrap; - color: inherit; - text-decoration: none; - text-overflow: inherit; - text-align: inherit; } + display: none; + } +} +.dnb-autocomplete .dnb-input__inner__element.dnb-p, .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p { + margin: 0; +} +.dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element { + margin-right: 2.5rem !important; +} +.dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p { + padding-right: 3rem; +} +.dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input { + padding-right: 1rem; +} +.dnb-autocomplete--disabled .dnb-input__inner__element { + cursor: not-allowed; +} +.dnb-autocomplete__text { + order: 1; + position: relative; + z-index: 4; + width: 100%; + height: inherit; + line-height: inherit; + padding: 0 var(--autocomplete-text-padding) 0 0; + overflow: hidden; + color: inherit; + text-align: left; + text-overflow: ellipsis; + font-size: var(--font-size-basis); +} +.dnb-autocomplete__text__inner { + display: inline-block; + width: 100%; + height: inherit; + padding: 0; + overflow: hidden; + white-space: nowrap; + color: inherit; + text-decoration: none; + text-overflow: inherit; + text-align: inherit; +} +.dnb-autocomplete > .dnb-form-label { + margin-right: 1rem; + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-autocomplete { + flex-wrap: wrap; + } .dnb-autocomplete > .dnb-form-label { - margin-right: 1rem; - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-autocomplete { - flex-wrap: wrap; } - .dnb-autocomplete > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-autocomplete--stretch { - display: flex; - flex-grow: 1; } - .dnb-autocomplete--stretch .dnb-autocomplete__inner { - flex-grow: 1; } - .dnb-autocomplete--stretch .dnb-autocomplete__row, .dnb-autocomplete--stretch .dnb-autocomplete__inner, .dnb-autocomplete--stretch .dnb-autocomplete__shell { - width: 100%; } - .dnb-autocomplete--stretch .dnb-form-label + .dnb-autocomplete__inner { - width: auto; } - .dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-autocomplete--stretch { - width: 100%; } - label + .dnb-autocomplete[class*='__form-status'] { - vertical-align: top; } - label + .dnb-autocomplete[class*='__form-status'] .dnb-autocomplete__shell { - top: -0.375rem; } - .dnb-autocomplete__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-autocomplete--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-autocomplete--stretch { + display: flex; + flex-grow: 1; +} +.dnb-autocomplete--stretch .dnb-autocomplete__inner { + flex-grow: 1; +} +.dnb-autocomplete--stretch .dnb-autocomplete__row, .dnb-autocomplete--stretch .dnb-autocomplete__inner, .dnb-autocomplete--stretch .dnb-autocomplete__shell { + width: 100%; +} +.dnb-autocomplete--stretch .dnb-form-label + .dnb-autocomplete__inner { + width: auto; +} +.dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-autocomplete--stretch { + width: 100%; +} +label + .dnb-autocomplete[class*=__form-status] { + vertical-align: top; +} +label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell { + top: -0.375rem; +} +.dnb-autocomplete__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-autocomplete--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-autocomplete { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-autocomplete { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-autocomplete > .dnb-form-label { - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-autocomplete__helper { - display: none; } } - .dnb-autocomplete__list .dnb-drawer-list__option__item > span { - padding-right: 0.125em; } -" + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-autocomplete > .dnb-form-label { + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-autocomplete__helper { + display: none; + } +} +.dnb-autocomplete__list .dnb-drawer-list__option__item > span { + padding-right: 0.125em; +}" `; diff --git a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 288a0fb7e0c..81c419a8f2f 100644 --- a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -9,15 +9,18 @@ exports[`Avatar scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-avatar { - color: var(--color-pistachio); } - .dnb-avatar--primary { - background-color: var(--color-emerald-green); } - .dnb-avatar--secondary { - background-color: var(--color-sea-green); } - .dnb-avatar--tertiary { - background-color: var(--color-mint-green); - color: var(--color-emerald-green); } -" + color: var(--color-pistachio); +} +.dnb-avatar--primary { + background-color: var(--color-emerald-green); +} +.dnb-avatar--secondary { + background-color: var(--color-sea-green); +} +.dnb-avatar--tertiary { + background-color: var(--color-mint-green); + color: var(--color-emerald-green); +}" `; exports[`Avatar scss have to match snapshot 1`] = ` @@ -32,6 +35,9 @@ exports[`Avatar scss have to match snapshot 1`] = ` * Avatar component * */ +/* + * Utilities + */ :root { --avatar-font-size--small: var(--font-size-x-small); --avatar-font-size--medium: var(--font-size-basis); @@ -48,7 +54,8 @@ exports[`Avatar scss have to match snapshot 1`] = ` --avatar-width--large: 4rem; --avatar-height--large: 4rem; --avatar-width--x-large: 5rem; - --avatar-height--x-large: 5rem; } + --avatar-height--x-large: 5rem; +} .dnb-avatar { position: relative; @@ -61,73 +68,89 @@ exports[`Avatar scss have to match snapshot 1`] = ` white-space: nowrap; border-radius: 50%; font-weight: var(--font-weight-medium); - line-height: 1; } - .dnb-avatar, - .dnb-core-style .dnb-avatar { - line-height: var(--button-height); } - .dnb-avatar--size-small { - width: var(--avatar-width--small); - height: var(--avatar-height--small); - font-size: var(--avatar-font-size--small); } - .dnb-avatar--size-small, - .dnb-core-style .dnb-avatar--size-small { - line-height: var(--avatar-line-height--small); } - .dnb-avatar--size-medium { - width: var(--avatar-width--medium); - height: var(--avatar-height--medium); - font-size: var(--avatar-font-size--medium); } - .dnb-avatar--size-medium, - .dnb-core-style .dnb-avatar--size-medium { - line-height: var(--avatar-line-height--medium); } - .dnb-avatar--size-large { - width: var(--avatar-width--large); - height: var(--avatar-height--large); - font-size: var(--avatar-font-size--large); } - .dnb-avatar--size-large, - .dnb-core-style .dnb-avatar--size-large { - line-height: var(--avatar-line-height--large); } - .dnb-avatar--size-x-large { - width: var(--avatar-width--x-large); - height: var(--avatar-height--x-large); - font-size: var(--avatar-font-size--x-large); } - .dnb-avatar--size-x-large, - .dnb-core-style .dnb-avatar--size-x-large { - line-height: var(--avatar-line-height--x-large); } - .dnb-avatar__group { - display: inline-flex; - justify-content: flex; - flex-direction: row; } - .dnb-avatar__group .dnb-avatar { - --border-color: var(--color-black-3); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-avatar__group .dnb-avatar--size-small { - margin-left: -0.5rem; } - .dnb-avatar__group .dnb-avatar--size-medium { - margin-left: -0.75rem; } - .dnb-avatar__group .dnb-avatar--size-large { - margin-left: -1rem; } - .dnb-avatar__group .dnb-avatar--size-x-large { - margin-left: -1.5rem; } - .dnb-avatar__group .dnb-avatar:nth-of-type(2) { - margin-left: 0; } - .dnb-avatar__group--elements-left { - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--color-black-55); } - .dnb-avatar__group--elements-left--size-small { - font-size: var(--font-size-x-small); - margin-left: 0.125rem; } - .dnb-avatar__group--elements-left--size-medium { - font-size: var(--font-size-small); - margin-left: 0.125rem; } - .dnb-avatar__group--elements-left--size-large { - font-size: var(--font-size-large); - margin-left: var(--spacing-xx-small); } - .dnb-avatar__group--elements-left--size-x-large { - font-size: var(--font-size-large); - margin-left: var(--spacing-xx-small); } -" + line-height: 1; +} +.dnb-avatar, .dnb-core-style .dnb-avatar { + line-height: var(--button-height); +} +.dnb-avatar--size-small { + width: var(--avatar-width--small); + height: var(--avatar-height--small); + font-size: var(--avatar-font-size--small); +} +.dnb-avatar--size-small, .dnb-core-style .dnb-avatar--size-small { + line-height: var(--avatar-line-height--small); +} +.dnb-avatar--size-medium { + width: var(--avatar-width--medium); + height: var(--avatar-height--medium); + font-size: var(--avatar-font-size--medium); +} +.dnb-avatar--size-medium, .dnb-core-style .dnb-avatar--size-medium { + line-height: var(--avatar-line-height--medium); +} +.dnb-avatar--size-large { + width: var(--avatar-width--large); + height: var(--avatar-height--large); + font-size: var(--avatar-font-size--large); +} +.dnb-avatar--size-large, .dnb-core-style .dnb-avatar--size-large { + line-height: var(--avatar-line-height--large); +} +.dnb-avatar--size-x-large { + width: var(--avatar-width--x-large); + height: var(--avatar-height--x-large); + font-size: var(--avatar-font-size--x-large); +} +.dnb-avatar--size-x-large, .dnb-core-style .dnb-avatar--size-x-large { + line-height: var(--avatar-line-height--x-large); +} +.dnb-avatar__group { + display: inline-flex; + justify-content: flex; + flex-direction: row; +} +.dnb-avatar__group .dnb-avatar { + --border-color: var(--color-black-3); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-avatar__group .dnb-avatar--size-small { + margin-left: -0.5rem; +} +.dnb-avatar__group .dnb-avatar--size-medium { + margin-left: -0.75rem; +} +.dnb-avatar__group .dnb-avatar--size-large { + margin-left: -1rem; +} +.dnb-avatar__group .dnb-avatar--size-x-large { + margin-left: -1.5rem; +} +.dnb-avatar__group .dnb-avatar:nth-of-type(2) { + margin-left: 0; +} +.dnb-avatar__group--elements-left { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--color-black-55); +} +.dnb-avatar__group--elements-left--size-small { + font-size: var(--font-size-x-small); + margin-left: 0.125rem; +} +.dnb-avatar__group--elements-left--size-medium { + font-size: var(--font-size-small); + margin-left: 0.125rem; +} +.dnb-avatar__group--elements-left--size-large { + font-size: var(--font-size-large); + margin-left: var(--spacing-xx-small); +} +.dnb-avatar__group--elements-left--size-x-large { + font-size: var(--font-size-large); + margin-left: var(--spacing-xx-small); +}" `; 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 c14d5ff5681..ea7c3b55b0c 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 @@ -9,12 +9,14 @@ exports[`Badge scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-badge { - color: var(--color-white); } - .dnb-badge--variant-information { - background-color: var(--color-emerald-green); } - .dnb-badge--variant-notification { - background-color: var(--color-fire-red); } -" + color: var(--color-white); +} +.dnb-badge--variant-information { + background-color: var(--color-emerald-green); +} +.dnb-badge--variant-notification { + background-color: var(--color-fire-red); +}" `; exports[`Badge scss have to match snapshot 1`] = ` @@ -29,13 +31,17 @@ exports[`Badge scss have to match snapshot 1`] = ` * Badge component * */ +/* + * Utilities + */ :root { --badge-font-size: var(--font-size-x-small); --badge-width: 1.5rem; --badge-height: 1.5rem; --badge-border-radius-information: calc(var(--badge-height) / 4); --badge-border-radius-notification: calc(var(--badge-height) / 2); - --badge-line-height: var(--line-height-x-small); } + --badge-line-height: var(--line-height-x-small); +} .dnb-badge { display: inline-flex; @@ -48,34 +54,42 @@ exports[`Badge scss have to match snapshot 1`] = ` align-items: center; width: var(--badge-width); height: var(--badge-height); - font-size: var(--badge-font-size); } - .dnb-badge, - .dnb-core-style .dnb-badge { - line-height: var(--badge-line-height); } - .dnb-badge__root { - position: relative; - display: inline-flex; - vertical-align: middle; - flex-shrink: 0; } - .dnb-badge__root .dnb-badge { - display: flex; - overflow: hidden; - position: absolute; - z-index: 2; } - .dnb-badge--variant-notification { - border-radius: var(--badge-border-radius-notification); } - .dnb-badge--variant-information { - border-radius: var(--badge-border-radius-information); - min-width: var(--badge-width); - width: auto; - padding: 0 var(--spacing-xx-small); } - .dnb-badge--horizontal-left { - left: 0; } - .dnb-badge--horizontal-right { - right: 0; } - .dnb-badge--vertical-bottom { - bottom: 0; } - .dnb-badge--vertical-top { - top: 0; } -" + font-size: var(--badge-font-size); +} +.dnb-badge, .dnb-core-style .dnb-badge { + line-height: var(--badge-line-height); +} +.dnb-badge__root { + position: relative; + display: inline-flex; + vertical-align: middle; + flex-shrink: 0; +} +.dnb-badge__root .dnb-badge { + display: flex; + overflow: hidden; + position: absolute; + z-index: 2; +} +.dnb-badge--variant-notification { + border-radius: var(--badge-border-radius-notification); +} +.dnb-badge--variant-information { + border-radius: var(--badge-border-radius-information); + min-width: var(--badge-width); + width: auto; + padding: 0 var(--spacing-xx-small); +} +.dnb-badge--horizontal-left { + left: 0; +} +.dnb-badge--horizontal-right { + right: 0; +} +.dnb-badge--vertical-bottom { + bottom: 0; +} +.dnb-badge--vertical-top { + top: 0; +}" `; 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 21333044a6b..62c5ac19807 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 @@ -12,14 +12,23 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -27,63 +36,81 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -94,156 +121,205 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -261,7 +337,8 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -279,252 +356,331 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Section component * */ +/* + * Utilities + */ .dnb-section { position: relative; - display: flow-root; } - .dnb-section::after { - content: ''; - position: absolute; - z-index: -15; - left: -100vw; - top: 0; - 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; } - .dnb-section .dnb-section::after { - z-index: -14; } - .dnb-section .dnb-section .dnb-section::after { - z-index: -13; } - .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -12; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -11; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -10; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -9; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -8; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -7; } - .dnb-section--spacing-x-small { - padding: var(--spacing-x-small) 0; } - .dnb-section--spacing-small { - padding: var(--spacing-small) 0; } - .dnb-section--spacing-medium { - padding: var(--spacing-medium) 0; } - .dnb-section--spacing-x-large { - padding: var(--spacing-x-large) 0; } - .dnb-section--spacing-xx-large { - padding: var(--spacing-xx-large) 0; } - .dnb-section--spacing, .dnb-section--spacing-large { - padding: var(--spacing-large) 0; } + display: flow-root; +} +.dnb-section::after { + content: ""; + position: absolute; + z-index: -15; + left: -100vw; + top: 0; + 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; +} +.dnb-section .dnb-section::after { + z-index: -14; +} +.dnb-section .dnb-section .dnb-section::after { + z-index: -13; +} +.dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -12; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -11; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -10; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -9; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -8; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -7; +} +.dnb-section--spacing-x-small { + padding: var(--spacing-x-small) 0; +} +.dnb-section--spacing-small { + padding: var(--spacing-small) 0; +} +.dnb-section--spacing-medium { + padding: var(--spacing-medium) 0; +} +.dnb-section--spacing-x-large { + padding: var(--spacing-x-large) 0; +} +.dnb-section--spacing-xx-large { + padding: var(--spacing-xx-large) 0; +} +.dnb-section--spacing, .dnb-section--spacing-large { + padding: var(--spacing-large) 0; +} /* * Breadcrumb component * */ +/* + * Utilities + */ .dnb-breadcrumb { margin: 0; padding: 0; display: flex; - flex-direction: column; } - .dnb-breadcrumb__bar.dnb-section { - display: flex; } - .dnb-breadcrumb__list.dnb-section { - display: flex; - margin: 0; - padding: 0; - list-style: none; - flex-wrap: wrap; - flex-direction: row; - align-items: center; } - .dnb-breadcrumb__item__span { - display: flex; - align-items: center; - line-height: normal; - padding: 0.5rem 0; } - .dnb-breadcrumb__item__span__icon { - margin-left: calc(var(--button-icon-size) / 2); - margin-right: 0.5rem; } - .dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text { - padding-left: 0.5rem; } - .dnb-breadcrumb__animation { - display: flex; - flex-direction: column; - transition: height 400ms var(--easing-default); } - .dnb-breadcrumb__animation .dnb-breadcrumb__item { - transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms); - transform: translateX(-1rem); } - .dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item { - transform: translateX(0); } - .dnb-breadcrumb__collapse { - display: flex; - flex-direction: column; } - .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section { - flex-direction: column; - align-items: flex-start; - margin: 0.5rem 0; - margin-left: 1.5rem; } -" + flex-direction: column; +} +.dnb-breadcrumb__bar.dnb-section { + display: flex; +} +.dnb-breadcrumb__list.dnb-section { + display: flex; + margin: 0; + padding: 0; + list-style: none; + flex-wrap: wrap; + flex-direction: row; + align-items: center; +} +.dnb-breadcrumb__item__span { + display: flex; + align-items: center; + line-height: normal; + padding: 0.5rem 0; +} +.dnb-breadcrumb__item__span__icon { + margin-left: calc(var(--button-icon-size) / 2); + margin-right: 0.5rem; +} +.dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text { + padding-left: 0.5rem; +} +.dnb-breadcrumb__animation { + display: flex; + flex-direction: column; + transition: height 400ms var(--easing-default); +} +.dnb-breadcrumb__animation .dnb-breadcrumb__item { + transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms); + transform: translateX(-1rem); +} +.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item { + transform: translateX(0); +} +.dnb-breadcrumb__collapse { + display: flex; + flex-direction: column; +} +.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section { + flex-direction: column; + align-items: flex-start; + margin: 0.5rem 0; + margin-left: 1.5rem; +}" `; 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 99de5f1e9ab..6c0038da66e 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 @@ -897,470 +897,539 @@ exports[`Button scss have to match default theme snapshot 1`] = ` .dnb-button { border: none; box-shadow: none; - text-align: left; } - .dnb-button--primary { - color: var(--color-white); - background-color: var(--color-sea-green); } - html:not([data-whatintent='touch']) .dnb-button--primary:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--primary:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--primary:focus[disabled] { - cursor: not-allowed; } - .dnb-button--primary:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-button--primary:active[disabled], - html:not([data-whatintent='touch']) .dnb-button--primary:active[disabled] { - cursor: not-allowed; } - .dnb-button--primary:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--primary:active:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-mint-green-50); - --border-color: transparent; - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-button--primary[disabled] { - color: var(--color-white); - background-color: var(--color-sea-green-30); } - .dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error { - color: var(--color-white); - background-color: var(--color-fire-red); } + text-align: left; +} +.dnb-button--primary { + color: var(--color-white); + background-color: var(--color-sea-green); +} +html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--primary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--primary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled] { + cursor: not-allowed; +} +.dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-mint-green-50); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-button--primary[disabled] { + color: var(--color-white); + background-color: var(--color-sea-green-30); +} +.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error { + color: var(--color-white); + background-color: var(--color-fire-red); +} +.dnb-button--secondary { + color: var(--color-sea-green); + background-color: var(--color-white); + --border-color: var(--color-sea-green); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { .dnb-button--secondary { - color: var(--color-sea-green); - background-color: var(--color-white); - --border-color: var(--color-sea-green); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-button--secondary { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-button--secondary { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - html:not([data-whatintent='touch']) .dnb-button--secondary:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--secondary:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--secondary:focus[disabled] { - cursor: not-allowed; } - .dnb-button--secondary:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-button--secondary:active[disabled], - html:not([data-whatintent='touch']) .dnb-button--secondary:active[disabled] { - cursor: not-allowed; } - .dnb-button--secondary:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:active:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-mint-green-50); - --border-color: transparent; - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { - color: var(--color-sea-green-30); - background-color: var(--color-white); - --border-color: var(--color-sea-green-30); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { - color: var(--color-fire-red); - --border-color: var(--color-fire-red); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon { - color: inherit; } - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-white); - --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-button--secondary { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--secondary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--secondary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] { - cursor: not-allowed; } - .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-button--secondary:not(.dnb-button--has-text):active[disabled], - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] { - cursor: not-allowed; } - .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) { - color: var(--color-emerald-green); - background-color: var(--color-mint-green-50); - --border-color: transparent; + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled] { + cursor: not-allowed; +} +.dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-mint-green-50); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { + color: var(--color-sea-green-30); + background-color: var(--color-white); + --border-color: var(--color-sea-green-30); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { + color: var(--color-fire-red); + --border-color: var(--color-fire-red); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-button--active { - --border-color: var(--color-emerald-green); + } +} +.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon { + color: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-white); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] { + cursor: not-allowed; +} +.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--tertiary { - position: relative; - color: var(--color-sea-green); - background-color: transparent; } - .dnb-button--tertiary .dnb-button__text { - position: relative; } - .dnb-button--tertiary .dnb-button__text::after { - content: ''; - position: absolute; - z-index: 1; - left: 0; - right: 0; - bottom: 0; - width: auto; - height: 0.095rem; - border-radius: calc(0.095rem / 2); - color: var(--color-sea-green); - background-color: currentColor; - bottom: -0.0625rem; - color: transparent; - transition: color 250ms ease-in-out; } - [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after { - transition: none; } - .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after { - content: none; } - .dnb-button--tertiary.dnb-button--has-text { - padding-left: 0; - padding-right: 0; } - .dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after { - left: -1rem; - right: -1rem; } - .dnb-button--tertiary:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) { - outline: initial; } - html[data-whatinput='keyboard'] .dnb-button--tertiary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) { - box-shadow: none; } - .dnb-button--tertiary:focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled])::before { - content: ''; - position: absolute; - z-index: 1; - top: 0; - left: -0.5rem; - bottom: 0; - right: -0.5rem; - height: inherit; - border-radius: inherit; - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled])::before { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after, - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after { - visibility: hidden; } - html:not([data-whatintent='touch']) .dnb-button--tertiary:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after { - visibility: visible; - color: var(--color-emerald-green); } - .dnb-button--tertiary:active[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary:active[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) { - outline: initial; } - html[data-whatinput='keyboard'] .dnb-button--tertiary:active:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) { - box-shadow: none; } - html[data-whatintent='touch'] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent='touch'] - html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after { - transition: none; - visibility: visible; - opacity: 1; - color: var(--color-emerald-green); } - html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) - html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after { - visibility: hidden; } - .dnb-button--tertiary .dnb-button__icon { - align-self: flex-start; - margin-top: calc(var(--button-height) / 2 - 0.5rem); } - .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon { - margin-top: calc(var(--button-height--large) / 2 - 0.5rem); } - .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon { - margin-top: calc(var(--button-height--medium) / 2 - 0.5rem); } - .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon { - margin-top: calc(var(--button-height--small) / 2 - 0.5rem); } - .dnb-button--tertiary.dnb-button--icon-position-top { - flex-direction: column; - border-radius: 0.5rem; - vertical-align: middle; } - .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text { - padding: 0; } - .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon { - margin-top: 0.5rem; - align-self: center; } - .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text { - margin-top: 0; - margin-bottom: 0.25rem; - font-size: var(--font-size-x-small); } - .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after { - left: 0; - right: 0; } - .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text { - font-size: var(--font-size-small); } - .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment { - order: 3; - height: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text { - padding-left: 1rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after { - left: -0.5rem; - right: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon { - margin-right: -0.5rem; - margin-left: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text { - padding-left: 0; - margin-left: 1rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after { - left: -0.5rem; - right: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before { - right: -1rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right { - /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text { - padding-right: 1rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after { - left: 0; - right: -0.5rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon { - margin-left: -0.5rem; - margin-right: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text { - padding-right: 0; - margin-right: 1rem; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after { - right: 0; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before { - left: -1rem; } - .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before { - left: 0; - right: 0; } - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) { - --border-color: var(--color-sea-green); - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled], - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled] { - cursor: not-allowed; } - .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) { - --border-color: var(--color-sea-green-30); - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - html[data-whatinput='keyboard'] -.dnb-button--tertiary:hover:focus .dnb-button__text::after { - visibility: hidden; } - .dnb-button--tertiary[disabled] { - color: var(--color-sea-green-30); } - .dnb-button--signal { - color: var(--color-ocean-green); - background-color: var(--color-accent-yellow); } - html:not([data-whatintent='touch']) .dnb-button--signal:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) { - color: var(--color-ocean-green); - background-color: var(--color-accent-yellow); - --border-color: var(--color-ocean-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatintent='touch'] .dnb-button--signal:active[disabled], - html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active[disabled] { - cursor: not-allowed; } - html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]), - html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) { - color: var(--color-ocean-green); - background-color: var(--color-accent-yellow); - --border-color: var(--color-ocean-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-button--signal:focus[disabled], - html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] { - cursor: not-allowed; } - .dnb-button--signal:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - color: var(--color-ocean-green); - background-color: var(--color-accent-yellow); } - html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-button--signal:active[disabled], - html:not([data-whatintent='touch']) .dnb-button--signal:active[disabled] { - cursor: not-allowed; } - .dnb-button--signal:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--signal:active:not([disabled]) { - color: var(--color-ocean-green); - background-color: var(--color-accent-yellow); - --border-color: transparent; - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-button--signal[disabled] { - color: var(--color-black-20); - background-color: var(--color-accent-yellow-30); } - .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) { - background-color: transparent; - box-shadow: none; } - .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 0.0625rem; - 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); - box-shadow: none; } - html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus::after, html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover::after { - background-color: var(--color-sea-green); } - html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover { - border-radius: 0; } - html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active { - color: var(--color-sea-green); - box-shadow: none; } - html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after { - background-color: var(--color-mint-green-50); } - html:not([data-whatintent='touch']) -.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] { - color: var(--color-black-55); - background-color: var(--color-black-3); } -" + } +} +.dnb-button--secondary:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] { + cursor: not-allowed; +} +.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) { + color: var(--color-emerald-green); + background-color: var(--color-mint-green-50); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-button--active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--tertiary { + position: relative; + color: var(--color-sea-green); + background-color: transparent; +} +.dnb-button--tertiary .dnb-button__text { + position: relative; +} +.dnb-button--tertiary .dnb-button__text::after { + content: ""; + position: absolute; + z-index: 1; + left: 0; + right: 0; + bottom: 0; + width: auto; + height: 0.095rem; + border-radius: 0.0475rem; + color: var(--color-sea-green); + background-color: currentColor; + bottom: -0.0625rem; + color: transparent; + transition: color 250ms ease-in-out; +} +[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after { + transition: none; +} +.dnb-skeleton .dnb-button--tertiary .dnb-button__text::after { + content: none; +} +.dnb-button--tertiary.dnb-button--has-text { + padding-left: 0; + padding-right: 0; +} +.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after { + left: -1rem; + right: -1rem; +} +.dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) { + outline: initial; +} +html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) { + box-shadow: none; +} +.dnb-button--tertiary:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: -0.5rem; + bottom: 0; + right: -0.5rem; + height: inherit; + border-radius: inherit; + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after { + visibility: hidden; +} +html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after { + visibility: visible; + color: var(--color-emerald-green); +} +.dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) { + outline: initial; +} +html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) { + box-shadow: none; +} +html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after { + transition: none; + visibility: visible; + opacity: 1; + color: var(--color-emerald-green); +} +html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after { + visibility: hidden; +} +.dnb-button--tertiary .dnb-button__icon { + align-self: flex-start; + margin-top: calc(var(--button-height) / 2 - 0.5rem); +} +.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon { + margin-top: calc(var(--button-height--large) / 2 - 0.5rem); +} +.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon { + margin-top: calc(var(--button-height--medium) / 2 - 0.5rem); +} +.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon { + margin-top: calc(var(--button-height--small) / 2 - 0.5rem); +} +.dnb-button--tertiary.dnb-button--icon-position-top { + flex-direction: column; + border-radius: 0.5rem; + vertical-align: middle; +} +.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text { + padding: 0; +} +.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon { + margin-top: 0.5rem; + align-self: center; +} +.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text { + margin-top: 0; + margin-bottom: 0.25rem; + font-size: var(--font-size-x-small); +} +.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after { + left: 0; + right: 0; +} +.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text { + font-size: var(--font-size-small); +} +.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment { + order: 3; + height: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text { + padding-left: 1rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after { + left: -0.5rem; + right: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon { + margin-right: -0.5rem; + margin-left: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text { + padding-left: 0; + margin-left: 1rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after { + left: -0.5rem; + right: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before { + right: -1rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right { + /* stylelint-disable */ + /* stylelint-enable */ +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text { + padding-right: 1rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after { + left: 0; + right: -0.5rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon { + margin-left: -0.5rem; + margin-right: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text { + padding-right: 0; + margin-right: 1rem; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after { + right: 0; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before { + left: -1rem; +} +.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before { + left: 0; + right: 0; +} +html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) { + --border-color: var(--color-sea-green); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled] { + cursor: not-allowed; +} +.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) { + --border-color: var(--color-sea-green-30); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text::after { + visibility: hidden; +} +.dnb-button--tertiary[disabled] { + color: var(--color-sea-green-30); +} +.dnb-button--signal { + color: var(--color-ocean-green); + background-color: var(--color-accent-yellow); +} +html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]) { + color: var(--color-ocean-green); + background-color: var(--color-accent-yellow); + --border-color: var(--color-ocean-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatintent=touch] .dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled] { + cursor: not-allowed; +} +html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]) { + color: var(--color-ocean-green); + background-color: var(--color-accent-yellow); + --border-color: var(--color-ocean-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-button--signal:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled] { + cursor: not-allowed; +} +.dnb-button--signal:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) { + color: var(--color-ocean-green); + background-color: var(--color-accent-yellow); +} +html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled] { + cursor: not-allowed; +} +.dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]) { + color: var(--color-ocean-green); + background-color: var(--color-accent-yellow); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-button--signal[disabled] { + color: var(--color-black-20); + background-color: var(--color-accent-yellow-30); +} +.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) { + background-color: transparent; + box-shadow: none; +} +.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 0.0625rem; + 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); + box-shadow: none; +} +html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus::after, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover::after { + background-color: var(--color-sea-green); +} +html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover { + border-radius: 0; +} +html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active { + color: var(--color-sea-green); + box-shadow: none; +} +html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after { + background-color: var(--color-mint-green-50); +} +html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] { + color: var(--color-black-55); + background-color: var(--color-black-3); +}" `; exports[`Button scss have to match snapshot 1`] = ` @@ -1375,10 +1444,16 @@ exports[`Button scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1386,63 +1461,81 @@ exports[`Button scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1453,156 +1546,205 @@ exports[`Button scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1620,7 +1762,8 @@ exports[`Button scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1638,154 +1781,197 @@ exports[`Button scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } -" + border: none; +}" `; 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 33a82a03fd9..eb14ddfa0a3 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 @@ -192,73 +192,88 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = ` /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-checkbox__gfx { - transition: opacity 200ms ease-out, transform 200ms ease-out; } - .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, - .dnb-checkbox__input[data-checked='true'] ~ .dnb-checkbox__gfx { - opacity: 1; - transform: scale(1); - color: var(--color-white); } - .dnb-checkbox__input:checked ~ .dnb-checkbox__button, - .dnb-checkbox__input[data-checked='true'] ~ .dnb-checkbox__button { - background-color: var(--color-sea-green); } - .dnb-checkbox__input:not(:checked):not([data-checked='true']) ~ .dnb-checkbox__gfx { - opacity: 0; - transform: scale(0.8); - color: var(--color-sea-green); } - .dnb-checkbox__input:not(:checked):not([data-checked='true']) ~ .dnb-checkbox__button { - background-color: var(--color-white); - border-color: var(--color-sea-green); } - .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, - .dnb-checkbox__input[disabled][data-checked='true'] ~ .dnb-checkbox__button { - border-color: transparent; - background-color: var(--color-sea-green-30); } - .dnb-checkbox__input[disabled]:not(:checked):not([data-checked='true']) ~ .dnb-checkbox__button { - border-color: var(--color-mint-green-50); } - .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__button, - .dnb-checkbox__input:not([disabled]):not([data-checked='true']):active ~ .dnb-checkbox__button { - background-color: var(--color-mint-green-50); - border-color: transparent; } - .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, - .dnb-checkbox__input:not([disabled])[data-checked='true']:active ~ .dnb-checkbox__gfx { - color: var(--color-white); } - .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button { - background-color: var(--color-mint-green-50); } - .dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, - .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked='true']:hover ~ .dnb-checkbox__button { - border-color: transparent; } - .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx { - color: var(--color-sea-green); } - html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button { - border: none; - background-color: var(--color-mint-green-50); } - html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx { - color: var(--color-sea-green); } - .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, - .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus { - display: block; } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button { - border: none; } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { - display: block; - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button { - background-color: var(--color-fire-red-8); } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked='true'] { - border-color: var(--color-fire-red); } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__button { - border-color: var(--color-fire-red-8); } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked='true'] ~ .dnb-checkbox__button { - background-color: var(--color-fire-red); } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx { - color: var(--color-fire-red); } - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx { - color: var(--color-fire-red-8); } -" + /* stylelint-enable */ +} +.dnb-checkbox__gfx { + transition: opacity 200ms ease-out, transform 200ms ease-out; +} +.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx { + opacity: 1; + transform: scale(1); + color: var(--color-white); +} +.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button { + background-color: var(--color-sea-green); +} +.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx { + opacity: 0; + transform: scale(0.8); + color: var(--color-sea-green); +} +.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button { + background-color: var(--color-white); + border-color: var(--color-sea-green); +} +.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button { + border-color: transparent; + background-color: var(--color-sea-green-30); +} +.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button { + border-color: var(--color-mint-green-50); +} +.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not([data-checked=true]):active ~ .dnb-checkbox__button { + background-color: var(--color-mint-green-50); + border-color: transparent; +} +.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx { + color: var(--color-white); +} +.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button { + background-color: var(--color-mint-green-50); +} +.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button { + border-color: transparent; +} +.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx { + color: var(--color-sea-green); +} +html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button { + border: none; + background-color: var(--color-mint-green-50); +} +html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx { + color: var(--color-sea-green); +} +.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus { + display: block; +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button { + border: none; +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { + display: block; + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button { + background-color: var(--color-fire-red-8); +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] { + border-color: var(--color-fire-red); +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__button { + border-color: var(--color-fire-red-8); +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button { + background-color: var(--color-fire-red); +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx { + color: var(--color-fire-red); +} +.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx { + color: var(--color-fire-red-8); +}" `; exports[`Checkbox scss have to match snapshot 1`] = ` @@ -273,10 +288,16 @@ exports[`Checkbox scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -287,199 +308,256 @@ exports[`Checkbox scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Checkbox component * */ +/* + * Utilities + */ :root { --checkbox-width--medium: 1.5rem; --checkbox-height--medium: 1.5rem; --checkbox-width--large: 2rem; --checkbox-height--large: 2rem; - --checkbox-border-width: 0.125rem; } + --checkbox-border-width: 0.125rem; +} .dnb-checkbox { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-checkbox__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-checkbox__shell { - user-select: none; - -webkit-user-select: none; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); } - .dnb-checkbox--large .dnb-checkbox__shell { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__button { - display: inline-block; - border: var(--checkbox-border-width) solid transparent; } - .dnb-checkbox__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-checkbox__focus, .dnb-checkbox__button { - position: relative; - z-index: 4; - width: calc(var(--checkbox-width--medium) - 0.25rem); - height: calc(var(--checkbox-height--medium) - 0.25rem); - border-radius: 0.25rem; } - .dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); - border-radius: 0.25rem; } - .dnb-checkbox__gfx { - position: absolute; - z-index: 5; - top: auto; - left: auto; - width: calc(var(--checkbox-width--medium) - 0.5rem); - height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; } - .dnb-checkbox--large { - line-height: var(--checkbox-height--large); } - .dnb-checkbox--large .dnb-checkbox__gfx { - width: calc(var(--checkbox-width--large) - 0.5rem); - height: calc(var(--checkbox-height--large) - 0.5rem); } - .dnb-checkbox__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 6; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-checkbox--large .dnb-checkbox__input { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__input:not([disabled]) { - cursor: pointer; } - .dnb-checkbox .dnb-form-label { - margin-bottom: 0; - margin-right: 0; - margin-left: 0; } - .dnb-checkbox__order { - display: inline-flex; - align-items: baseline; } - .dnb-checkbox__suffix { - order: 4; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { - order: 2; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { - order: 3; - margin-top: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { - order: 1; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { - order: 3; - vertical-align: top; - margin-top: 0.5rem; } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { - border-color: var(--skeleton-color); } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { - border-radius: 0; } -" + line-height: var(--line-height-basis); +} +.dnb-checkbox__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-checkbox__shell { + user-select: none; + -webkit-user-select: none; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); +} +.dnb-checkbox--large .dnb-checkbox__shell { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__button { + display: inline-block; + border: var(--checkbox-border-width) solid transparent; +} +.dnb-checkbox__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-checkbox__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-checkbox__focus, .dnb-checkbox__button { + position: relative; + z-index: 4; + width: calc(var(--checkbox-width--medium) - 0.25rem); + height: calc(var(--checkbox-height--medium) - 0.25rem); + border-radius: 0.25rem; +} +.dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); + border-radius: 0.25rem; +} +.dnb-checkbox__gfx { + position: absolute; + z-index: 5; + top: auto; + left: auto; + width: calc(var(--checkbox-width--medium) - 0.5rem); + height: calc(var(--checkbox-height--medium) - 0.5rem); + shape-rendering: geometricPrecision; +} +.dnb-checkbox--large { + line-height: var(--checkbox-height--large); +} +.dnb-checkbox--large .dnb-checkbox__gfx { + width: calc(var(--checkbox-width--large) - 0.5rem); + height: calc(var(--checkbox-height--large) - 0.5rem); +} +.dnb-checkbox__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 6; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-checkbox--large .dnb-checkbox__input { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__input:not([disabled]) { + cursor: pointer; +} +.dnb-checkbox .dnb-form-label { + margin-bottom: 0; + margin-right: 0; + margin-left: 0; +} +.dnb-checkbox__order { + display: inline-flex; + align-items: baseline; +} +.dnb-checkbox__suffix { + order: 4; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { + order: 2; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { + order: 3; + margin-top: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { + order: 1; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { + order: 3; + vertical-align: top; + margin-top: 0.5rem; +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { + border-color: var(--skeleton-color); +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { + border-radius: 0; +}" `; 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 a1d3234cf11..11325b375bd 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 @@ -1723,113 +1723,103 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input { - color: var(--color-black-55); } - .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator { - color: var(--color-black-55); } - -.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='0']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='1']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='2']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='3']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='4']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='5']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='6']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='7']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='8']:not([data-input-state='disabled']), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='9']:not([data-input-state='disabled']) { - color: var(--color-black); } - .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='0']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='1']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='2']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='3']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='4']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='5']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='6']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='7']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='8']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*='9']:not([data-input-state='disabled']) ~ .dnb-date-picker--separator { - color: var(--color-black); } - + color: var(--color-black-55); +} +.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator { + color: var(--color-black-55); +} +.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]), .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) { + color: var(--color-black); +} +.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="0"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="1"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="2"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="3"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="4"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="5"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="6"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="7"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="8"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input[value*="9"]:not([data-input-state=disabled]) ~ .dnb-date-picker--separator { + color: var(--color-black); +} .dnb-date-picker__container { box-shadow: var(--shadow-default); border-radius: 0.25rem; - background-color: var(--color-white); } - + background-color: var(--color-white); +} .dnb-date-picker__addon::after, .dnb-date-picker__calendar::after { - background-color: var(--color-black-8); } - + background-color: var(--color-black-8); +} .dnb-date-picker__header::after { - background-color: var(--color-black-8); } - + background-color: var(--color-black-8); +} .dnb-date-picker__header__nav .dnb-button { - box-shadow: none; } - + box-shadow: none; +} .dnb-date-picker__header__title { text-transform: capitalize; text-align: center; font-size: var(--font-size-basis); font-weight: var(--font-weight-medium); - color: var(--color-black-80); } - + color: var(--color-black-80); +} .dnb-date-picker__labels__day { text-transform: capitalize; font-weight: var(--font-weight-medium); - color: var(--color-black-80); } - + color: var(--color-black-80); +} .dnb-date-picker__day, .dnb-date-picker__labels__day { - text-align: center; } - + text-align: center; +} .dnb-date-picker__day--today .dnb-button { - font-weight: var(--font-weight-medium); } - -.dnb-date-picker__day--preview .dnb-button, -.dnb-date-picker__day--inactive .dnb-button, -.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) { - background-color: transparent; } - + font-weight: var(--font-weight-medium); +} +.dnb-date-picker__day--preview .dnb-button, .dnb-date-picker__day--inactive .dnb-button, .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) { + background-color: transparent; +} .dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date), .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) { - background-color: var(--color-mint-green-50); } - + background-color: var(--color-mint-green-50); +} .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive)::after, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive)::after { - background-color: var(--color-mint-green-50); } - + background-color: var(--color-mint-green-50); +} .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button { color: var(--color-mint-green-25); - background-color: var(--color-emerald-green); } - + background-color: var(--color-emerald-green); +} .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover, .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover { - box-shadow: none; } - -html:not([data-whatintent='touch']) -.dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]), -html:not([data-whatintent='touch']) -.dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]) { + box-shadow: none; +} +html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]) { color: var(--color-mint-green-25); - background-color: var(--color-emerald-green); } - + background-color: var(--color-emerald-green); +} .dnb-date-picker__day--disabled .dnb-button { - text-decoration: line-through; } - + text-decoration: line-through; +} .dnb-date-picker__day--inactive .dnb-button { - color: var(--color-black-55); } - -.dnb-date-picker__day--inactive .dnb-button[disabled], -.dnb-date-picker__day--disabled .dnb-button[disabled] { - box-shadow: none; } - -html:not([data-whatintent='touch']) .dnb-date-picker__day--inactive .dnb-button[disabled] { - cursor: default; } - -.dnb-date-picker--opened .dnb-input .dnb-input__shell, -.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { + color: var(--color-black-55); +} +.dnb-date-picker__day--inactive .dnb-button[disabled], .dnb-date-picker__day--disabled .dnb-button[disabled] { + box-shadow: none; +} +html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[disabled] { + cursor: default; +} +.dnb-date-picker--opened .dnb-input .dnb-input__shell, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - -.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, -.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__submit-button__button.dnb-button--secondary { + border-color: transparent; +} +.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary { color: var(--color-white); - background-color: var(--color-sea-green); } - .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary::after, - .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__submit-button__button.dnb-button--secondary::after { - background-color: inherit; } - + background-color: var(--color-sea-green); +} +.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary::after, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary::after { + background-color: inherit; +} .dnb-date-picker__triangle::before { border: none; background-color: var(--color-white); - box-shadow: var(--shadow-default); } - -.dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { + box-shadow: var(--shadow-default); +} +.dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } -" + border-color: transparent; +}" `; exports[`DatePicker scss have to match snapshot 1`] = ` @@ -1844,18 +1834,30 @@ exports[`DatePicker scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1863,63 +1865,81 @@ exports[`DatePicker scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1930,156 +1950,205 @@ exports[`DatePicker scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -2097,7 +2166,8 @@ exports[`DatePicker scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -2115,164 +2185,421 @@ exports[`DatePicker scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -2283,25 +2610,124 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Input component * */ +/* + * Utilities + */ :root { --input-font-size: var(--font-size-basis); --input-font-size--small: var(--font-size-basis); @@ -2316,399 +2742,1898 @@ legend.dnb-form-label { --input-height--medium: 2.5rem; --input-height--large: 3rem; --input-border-width: 0.0625rem; - --input-border-radius: 0.25rem; } + --input-border-radius: 0.25rem; +} .dnb-input { display: inline-flex; align-items: center; font-size: var(--input-font-small); line-height: var(--input-height); - text-align: left; } - .dnb-input__inner { - display: inline-flex; - flex-direction: column; - width: auto; } - .dnb-input__shell { - position: relative; - display: flex; - align-items: center; - border: var(--input-border-width) solid var(--color-sea-green); } - .dnb-input__input { - border: none; - outline: none; - word-break: normal; - position: relative; - z-index: 2; } - .dnb-input__input[disabled] { - user-select: none; - -webkit-user-select: none; - opacity: 1; } - .dnb-input__shell, .dnb-input__input { - height: var(--input-height); - border-radius: var(--input-border-radius); } - .dnb-input__placeholder, .dnb-input__input { - width: 100%; - padding-left: var(--input-padding); - padding-right: var(--input-padding); } - .dnb-input__placeholder, .dnb-input__input, - .dnb-input input.dnb-input__input { - padding-top: 0; - padding-bottom: 0; - color: inherit; - background-color: transparent; - font-size: var(--input-font-size); - line-height: inherit; } - .dnb-input__placeholder { - pointer-events: none; - position: absolute; - z-index: 1; - top: 0; - left: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - .dnb-input input.dnb-input__input[type='file'] { - line-height: calc(var(--input-height) - 2px); } - .dnb-input__input::-webkit-search-cancel-button { - display: none; } - .dnb-input__input::-ms-clear { - display: none; } - .dnb-input ::-webkit-file-upload-button { - cursor: pointer; - outline: none; - color: var(--color-sea-green); } - .dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { - color: var(--color-emerald-green); } - .dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--has-submit-element .dnb-input__input, - .dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding) * 2.5); } - .dnb-input--password .dnb-input__placeholder, - .dnb-input--password .dnb-input__input { - margin-right: 2.5rem; - padding-right: 0; } - .dnb-input--password .dnb-input__placeholder::-ms-clear, - .dnb-input--password .dnb-input__input::-ms-clear { - display: none; } - .dnb-input--password .dnb-input__placeholder::-ms-reveal, - .dnb-input--password .dnb-input__input::-ms-reveal { - display: none; } - .dnb-input--password .dnb-input__placeholder { - padding-right: 4rem; } - .dnb-input--password .dnb-input__input { - font-family: var(--font-family-monospace); } - .dnb-input__row { - display: inline-flex; - align-items: center; } - .dnb-input__suffix { - color: inherit; } - .dnb-input__submit-element { - z-index: 3; - margin-left: calc(1px - 1px - var(--input-height)); - line-height: var(--line-height-basis); } - .dnb-input__submit-button { - position: relative; - align-self: center; - /* IE needs this to stay centered */ } - .dnb-input__submit-button__button { - border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } + text-align: left; +} +.dnb-input__inner { + display: inline-flex; + flex-direction: column; + width: auto; +} +.dnb-input__shell { + position: relative; + display: flex; + align-items: center; + border: var(--input-border-width) solid var(--color-sea-green); +} +.dnb-input__input { + border: none; + outline: none; + word-break: normal; + position: relative; + z-index: 2; +} +.dnb-input__input[disabled] { + user-select: none; + -webkit-user-select: none; + opacity: 1; +} +.dnb-input__shell, .dnb-input__input { + height: var(--input-height); + border-radius: var(--input-border-radius); +} +.dnb-input__placeholder, .dnb-input__input { + width: 100%; + padding-left: var(--input-padding); + padding-right: var(--input-padding); +} +.dnb-input__placeholder, .dnb-input__input, +.dnb-input input.dnb-input__input { + padding-top: 0; + padding-bottom: 0; + color: inherit; + background-color: transparent; + font-size: var(--input-font-size); + line-height: inherit; +} +.dnb-input__placeholder { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.dnb-input input.dnb-input__input[type=file] { + line-height: calc(var(--input-height) - 2px); +} +.dnb-input__input::-webkit-search-cancel-button { + display: none; +} +.dnb-input__input::-ms-clear { + display: none; +} +.dnb-input ::-webkit-file-upload-button { + cursor: pointer; + outline: none; + color: var(--color-sea-green); +} +.dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { + color: var(--color-emerald-green); +} +.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--has-submit-element .dnb-input__input, .dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding) * 2.5); +} +.dnb-input--password .dnb-input__placeholder, .dnb-input--password .dnb-input__input { + margin-right: 2.5rem; + padding-right: 0; +} +.dnb-input--password .dnb-input__placeholder::-ms-clear, .dnb-input--password .dnb-input__input::-ms-clear { + display: none; +} +.dnb-input--password .dnb-input__placeholder::-ms-reveal, .dnb-input--password .dnb-input__input::-ms-reveal { + display: none; +} +.dnb-input--password .dnb-input__placeholder { + padding-right: 4rem; +} +.dnb-input--password .dnb-input__input { + font-family: var(--font-family-monospace); +} +.dnb-input__row { + display: inline-flex; + align-items: center; +} +.dnb-input__suffix { + color: inherit; +} +.dnb-input__submit-element { + z-index: 3; + margin-left: calc(0px - var(--input-height)); + line-height: var(--line-height-basis); +} +.dnb-input__submit-button { + position: relative; + align-self: center; /* IE needs this to stay centered */ +} +.dnb-input__submit-button__button { + border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; +} +.dnb-input > .dnb-form-label { + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-input { + flex-wrap: wrap; + } .dnb-input > .dnb-form-label { - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-input { - flex-wrap: wrap; } - .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - .dnb-input--small { - line-height: var(--input-height--small); } - .dnb-input--small .dnb-input__shell, - .dnb-input--small .dnb-input__input { - height: var(--input-height--small); } - .dnb-input--small .dnb-input__placeholder, - .dnb-input--small .dnb-input__input { - padding-left: var(--input-padding--small); - padding-right: var(--input-padding--small); - font-size: var(--input-font-size--small); } - .dnb-input--small .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--small)); } - .dnb-input--small .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--small); - height: var(--input-height--small); - line-height: var(--input-height--small); } - .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--small) * 2); } - .dnb-input--medium { - line-height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__shell, - .dnb-input--medium .dnb-input__input { - height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__placeholder, - .dnb-input--medium .dnb-input__input { - padding-left: var(--input-padding--medium); - padding-right: var(--input-padding--medium); - font-size: var(--input-font-size--medium); } - .dnb-input--medium .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--medium)); } - .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--medium); - height: var(--input-height--medium); - line-height: var(--input-height--medium); } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--medium) * 3); } - .dnb-input--large { - line-height: var(--input-height--large); } - .dnb-input--large .dnb-input__shell, - .dnb-input--large .dnb-input__input { - height: var(--input-height--large); } - .dnb-input--large .dnb-input__placeholder, - .dnb-input--large .dnb-input__input { - padding-left: var(--input-padding--large); - padding-right: var(--input-padding--large); - font-size: var(--input-font-size--large); } - .dnb-input--large .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large)); } - .dnb-input--large .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--large); - height: var(--input-height--large); } - .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--large) * 3); } - .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large) + 0.5rem); } - .dnb-input__align--center .dnb-input__placeholder, - .dnb-input__align--center .dnb-input__input { - text-align: center; } - .dnb-input__align--right .dnb-input__placeholder, - .dnb-input__align--right .dnb-input__input { - text-align: right; } - .dnb-input--clear.dnb-input__submit-element { - opacity: 0; - transition: opacity 200ms ease-in-out; } - .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); - border-radius: var(--button-border-radius); } - .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { - margin: auto; } - html:not([data-whatintent='touch']) -.dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { - cursor: default; } - .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: 1rem; - height: 1rem; } - .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, - .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); } - .dnb-input[data-has-content='true'] .dnb-input--clear { - opacity: 1; } - .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2.5rem; } - .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2rem; } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3rem; } - .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3.5rem; } - .dnb-input__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-input--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +.dnb-input--small { + line-height: var(--input-height--small); +} +.dnb-input--small .dnb-input__shell, +.dnb-input--small .dnb-input__input { + height: var(--input-height--small); +} +.dnb-input--small .dnb-input__placeholder, +.dnb-input--small .dnb-input__input { + padding-left: var(--input-padding--small); + padding-right: var(--input-padding--small); + font-size: var(--input-font-size--small); +} +.dnb-input--small .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--small)); +} +.dnb-input--small .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--small); + height: var(--input-height--small); + line-height: var(--input-height--small); +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--small) * 2); +} +.dnb-input--medium { + line-height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__shell, +.dnb-input--medium .dnb-input__input { + height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__placeholder, +.dnb-input--medium .dnb-input__input { + padding-left: var(--input-padding--medium); + padding-right: var(--input-padding--medium); + font-size: var(--input-font-size--medium); +} +.dnb-input--medium .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--medium)); +} +.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--medium); + height: var(--input-height--medium); + line-height: var(--input-height--medium); +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--medium) * 3); +} +.dnb-input--large { + line-height: var(--input-height--large); +} +.dnb-input--large .dnb-input__shell, +.dnb-input--large .dnb-input__input { + height: var(--input-height--large); +} +.dnb-input--large .dnb-input__placeholder, +.dnb-input--large .dnb-input__input { + padding-left: var(--input-padding--large); + padding-right: var(--input-padding--large); + font-size: var(--input-font-size--large); +} +.dnb-input--large .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large)); +} +.dnb-input--large .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--large); + height: var(--input-height--large); +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--large) * 3); +} +.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large) + 0.5rem); +} +.dnb-input__align--center .dnb-input__placeholder, .dnb-input__align--center .dnb-input__input { + text-align: center; +} +.dnb-input__align--right .dnb-input__placeholder, .dnb-input__align--right .dnb-input__input { + text-align: right; +} +.dnb-input--clear.dnb-input__submit-element { + opacity: 0; + transition: opacity 200ms ease-in-out; +} +.dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); + border-radius: var(--button-border-radius); +} +.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { + margin: auto; +} +html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { + cursor: default; +} +.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: 1rem; + height: 1rem; +} +.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); +} +.dnb-input[data-has-content=true] .dnb-input--clear { + opacity: 1; +} +.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2.5rem; +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2rem; +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3rem; +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3.5rem; +} +.dnb-input__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-input--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-input--stretch { + display: flex; + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner { + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { + width: 100%; +} +.dnb-input--stretch .dnb-form-label + .dnb-input__inner { + width: auto; +} +.dnb-input--vertical.dnb-input--stretch .dnb-input__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-input--stretch { + width: 100%; +} +.dnb-input__icon { + order: 0; + position: absolute; + left: 1rem; + right: auto; + top: 0; + bottom: 0; + margin: auto; +} +.dnb-input--icon-position-right .dnb-input__icon { + order: 1; + left: auto; + right: 1rem; +} +.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 2.5rem; +} +.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 2.5rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 3rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 3rem; +} +html[data-visual-test] .dnb-input__input { + caret-color: var(--color-white); +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-input { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-input--stretch { - display: flex; - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner { - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { - width: 100%; } - .dnb-input--stretch .dnb-form-label + .dnb-input__inner { - width: auto; } - .dnb-input--vertical.dnb-input--stretch .dnb-input__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-input--stretch { - width: 100%; } - .dnb-input__icon { - order: 0; - position: absolute; - left: 1rem; - right: auto; - top: 0; - bottom: 0; - margin: auto; } - .dnb-input--icon-position-right .dnb-input__icon { - order: 1; - left: auto; - right: 1rem; } - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 2.5rem; } - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 2.5rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 3rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 3rem; } - html[data-visual-test] .dnb-input__input { - caret-color: var(--color-white); } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-input { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-input__row { - align-items: flex-start; } - .dnb-responsive-component .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; } } + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-input__row { + align-items: flex-start; + } + .dnb-responsive-component .dnb-input > .dnb-form-label { + margin-bottom: 0.5rem; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + +/* +* Button component +* +*/ +/* + * Utilities + */ +:root { + --button-font-size: var(--font-size-basis); + --button-font-size-small: var(--font-size-small); + --button-width: 2.5rem; + --button-height: 2.5rem; + --button-width--small: 1.5rem; + --button-height--small: 1.5rem; + --button-width--medium: 2rem; + --button-height--medium: 2rem; + --button-width--large: 3rem; + --button-height--large: 3rem; + --button-icon-size: 1rem; + --button-border-width: 0.0625rem; + --button-border-width--hover: 0.1875rem; + --button-border-radius: calc(var(--button-height) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); + --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--large: calc(var(--button-height--large) / 2); +} + +.dnb-button { + position: relative; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--button-width); + height: auto; + padding: 0; + border: var(--button-border-width) solid transparent; + border-radius: var(--button-border-radius); + text-decoration: none; + font-size: var(--font-size-small); + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} + +/* Firefox includes a hidden border which messes up button dimensions */ +button.dnb-button::-moz-focus-inner { + border: none; +} + /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + +/* +* Button component +* +*/ +/* + * Utilities + */ +:root { + --button-font-size: var(--font-size-basis); + --button-font-size-small: var(--font-size-small); + --button-width: 2.5rem; + --button-height: 2.5rem; + --button-width--small: 1.5rem; + --button-height--small: 1.5rem; + --button-width--medium: 2rem; + --button-height--medium: 2rem; + --button-width--large: 3rem; + --button-height--large: 3rem; + --button-icon-size: 1rem; + --button-border-width: 0.0625rem; + --button-border-width--hover: 0.1875rem; + --button-border-radius: calc(var(--button-height) / 2); + --button-border-radius--small: calc(var(--button-height--small) / 2); + --button-border-radius--medium: calc(var(--button-height--medium) / 2); + --button-border-radius--large: calc(var(--button-height--large) / 2); +} + +.dnb-button { + position: relative; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--button-width); + height: auto; + padding: 0; + border: var(--button-border-width) solid transparent; + border-radius: var(--button-border-radius); + text-decoration: none; + font-size: var(--font-size-small); + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} + +/* Firefox includes a hidden border which messes up button dimensions */ +button.dnb-button::-moz-focus-inner { + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + /* * Checkbox component * */ +/* + * Utilities + */ :root { --checkbox-width--medium: 1.5rem; --checkbox-height--medium: 1.5rem; --checkbox-width--large: 2rem; --checkbox-height--large: 2rem; - --checkbox-border-width: 0.125rem; } + --checkbox-border-width: 0.125rem; +} .dnb-checkbox { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-checkbox__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-checkbox__shell { - user-select: none; - -webkit-user-select: none; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); } - .dnb-checkbox--large .dnb-checkbox__shell { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__button { - display: inline-block; - border: var(--checkbox-border-width) solid transparent; } - .dnb-checkbox__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-checkbox__focus, .dnb-checkbox__button { - position: relative; - z-index: 4; - width: calc(var(--checkbox-width--medium) - 0.25rem); - height: calc(var(--checkbox-height--medium) - 0.25rem); - border-radius: 0.25rem; } - .dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); - border-radius: 0.25rem; } - .dnb-checkbox__gfx { - position: absolute; - z-index: 5; - top: auto; - left: auto; - width: calc(var(--checkbox-width--medium) - 0.5rem); - height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; } - .dnb-checkbox--large { - line-height: var(--checkbox-height--large); } - .dnb-checkbox--large .dnb-checkbox__gfx { - width: calc(var(--checkbox-width--large) - 0.5rem); - height: calc(var(--checkbox-height--large) - 0.5rem); } - .dnb-checkbox__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 6; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-checkbox--large .dnb-checkbox__input { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__input:not([disabled]) { - cursor: pointer; } - .dnb-checkbox .dnb-form-label { - margin-bottom: 0; - margin-right: 0; - margin-left: 0; } - .dnb-checkbox__order { - display: inline-flex; - align-items: baseline; } - .dnb-checkbox__suffix { - order: 4; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { - order: 2; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { - order: 3; - margin-top: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { - order: 1; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { - order: 3; - vertical-align: top; - margin-top: 0.5rem; } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { - border-color: var(--skeleton-color); } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { - border-radius: 0; } + line-height: var(--line-height-basis); +} +.dnb-checkbox__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-checkbox__shell { + user-select: none; + -webkit-user-select: none; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); +} +.dnb-checkbox--large .dnb-checkbox__shell { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__button { + display: inline-block; + border: var(--checkbox-border-width) solid transparent; +} +.dnb-checkbox__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-checkbox__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-checkbox__focus, .dnb-checkbox__button { + position: relative; + z-index: 4; + width: calc(var(--checkbox-width--medium) - 0.25rem); + height: calc(var(--checkbox-height--medium) - 0.25rem); + border-radius: 0.25rem; +} +.dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); + border-radius: 0.25rem; +} +.dnb-checkbox__gfx { + position: absolute; + z-index: 5; + top: auto; + left: auto; + width: calc(var(--checkbox-width--medium) - 0.5rem); + height: calc(var(--checkbox-height--medium) - 0.5rem); + shape-rendering: geometricPrecision; +} +.dnb-checkbox--large { + line-height: var(--checkbox-height--large); +} +.dnb-checkbox--large .dnb-checkbox__gfx { + width: calc(var(--checkbox-width--large) - 0.5rem); + height: calc(var(--checkbox-height--large) - 0.5rem); +} +.dnb-checkbox__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 6; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-checkbox--large .dnb-checkbox__input { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__input:not([disabled]) { + cursor: pointer; +} +.dnb-checkbox .dnb-form-label { + margin-bottom: 0; + margin-right: 0; + margin-left: 0; +} +.dnb-checkbox__order { + display: inline-flex; + align-items: baseline; +} +.dnb-checkbox__suffix { + order: 4; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { + order: 2; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { + order: 3; + margin-top: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { + order: 1; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { + order: 3; + vertical-align: top; + margin-top: 0.5rem; +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { + border-color: var(--skeleton-color); +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { + border-radius: 0; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + /* * Radio component * */ +/* + * Utilities + */ :root { --radio-width--medium: 1.5rem; --radio-height--medium: 1.5rem; @@ -2716,592 +4641,978 @@ legend.dnb-form-label { --radio-height--large: 2rem; --radio-border-width: 0.125rem; --radio-margin-right: 1rem; - --radio-margin-bottom: 0.5rem; } + --radio-margin-bottom: 0.5rem; +} .dnb-radio { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-radio__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-radio__shell { - position: relative; - user-select: none; - -webkit-user-select: none; - display: flex; - align-items: center; - justify-content: center; - width: var(--radio-width--medium); - height: var(--radio-height--medium); } - .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - position: absolute; - z-index: 4; } - .dnb-radio__button { - border: var(--radio-border-width) solid transparent; } - .dnb-radio__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-radio__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-radio__focus, .dnb-radio__button { - width: calc(var(--radio-width--medium) - 0.25rem); - height: calc(var(--radio-height--medium) - 0.25rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { - width: calc(var(--radio-width--large) - 0.125rem); - height: calc(var(--radio-height--large) - 0.125rem); } - .dnb-radio__dot { - width: calc(var(--radio-width--medium) - 0.75rem); - height: calc(var(--radio-height--medium) - 0.75rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__dot { - width: calc(var(--radio-width--large) - 0.875rem); - height: calc(var(--radio-height--large) - 0.875rem); } - .dnb-radio__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 5; - width: var(--radio-width--medium); - height: var(--radio-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-radio--large .dnb-radio__input { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio__input:not([disabled]) { - cursor: pointer; } - .dnb-radio__order { - display: inline-flex; - align-items: baseline; } - .dnb-radio-group--column .dnb-radio__order { - display: flex; } - .dnb-radio__row { - display: inline-flex; } - .dnb-radio__suffix { - order: 3; } - .dnb-radio__suffix .dnb-modal__trigger { - margin-top: -0.25rem; - margin-bottom: -0.25rem; } - .dnb-radio-group__suffix { - font-size: var(--font-size-basis); } - .dnb-radio--large { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__suffix { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__shell { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio .dnb-form-label { - margin-right: 0; - margin-left: 0; - margin-bottom: 0; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { - order: 2; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { - order: 1; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] + line-height: var(--line-height-basis); +} +.dnb-radio__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-radio__shell { + position: relative; + user-select: none; + -webkit-user-select: none; + display: flex; + align-items: center; + justify-content: center; + width: var(--radio-width--medium); + height: var(--radio-height--medium); +} +.dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { + position: absolute; + z-index: 4; +} +.dnb-radio__button { + border: var(--radio-border-width) solid transparent; +} +.dnb-radio__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-radio__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-radio__focus, .dnb-radio__button { + width: calc(var(--radio-width--medium) - 0.25rem); + height: calc(var(--radio-height--medium) - 0.25rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { + width: calc(var(--radio-width--large) - 0.125rem); + height: calc(var(--radio-height--large) - 0.125rem); +} +.dnb-radio__dot { + width: calc(var(--radio-width--medium) - 0.75rem); + height: calc(var(--radio-height--medium) - 0.75rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__dot { + width: calc(var(--radio-width--large) - 0.875rem); + height: calc(var(--radio-height--large) - 0.875rem); +} +.dnb-radio__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 5; + width: var(--radio-width--medium); + height: var(--radio-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-radio--large .dnb-radio__input { + width: var(--radio-width--large); + height: var(--radio-height--large); +} +.dnb-radio__input:not([disabled]) { + cursor: pointer; +} +.dnb-radio__order { + display: inline-flex; + align-items: baseline; +} +.dnb-radio-group--column .dnb-radio__order { + display: flex; +} +.dnb-radio__row { + display: inline-flex; +} +.dnb-radio__suffix { + order: 3; +} +.dnb-radio__suffix .dnb-modal__trigger { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} +.dnb-radio-group__suffix { + font-size: var(--font-size-basis); +} +.dnb-radio--large { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__suffix { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__shell { + width: var(--radio-width--large); + height: var(--radio-height--large); +} .dnb-radio .dnb-form-label { - margin-top: 0; } - :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { - vertical-align: top; } - .dnb-radio .dnb-form-status { - order: 4; - margin-top: 0.375rem; - /* 6/16 */ - margin-bottom: 0; } - .dnb-radio + .dnb-form-status { - margin-top: 0.5rem; - margin-bottom: 1rem; } - .dnb-radio-group { - display: inline-flex; - flex-direction: row; } - .dnb-radio-group .dnb-radio { - margin-right: var(--radio-margin-right); - margin-bottom: var(--radio-margin-bottom); } - .dnb-radio-group--column .dnb-radio { - display: flex; - margin-right: 0; } - .dnb-radio-group .dnb-radio:last-of-type { - margin-right: 0; } - .dnb-radio-group [role='radiogroup'], .dnb-radio-group__shell { - display: block; } - .dnb-radio-group__shell > .dnb-form-status { - margin-top: 0; - margin-bottom: 0; } - .dnb-radio-group--column .dnb-radio-group__shell { - flex-direction: column; } - .dnb-radio-group .dnb-form-row { - align-items: flex-start; - margin-bottom: calc(1px - 1px - var(--radio-margin-bottom)); } - .dnb-radio-group .dnb-form-row::before { - font-size: var(--font-size-basis); } - .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { - border-color: var(--skeleton-color); } + margin-right: 0; + margin-left: 0; + margin-bottom: 0; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { + order: 2; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { + order: 1; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label { + margin-top: 0; +} +:not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { + vertical-align: top; +} +.dnb-radio .dnb-form-status { + order: 4; + margin-top: 0.375rem; /* 6/16 */ + margin-bottom: 0; +} +.dnb-radio + .dnb-form-status { + margin-top: 0.5rem; + margin-bottom: 1rem; +} +.dnb-radio-group { + display: inline-flex; + flex-direction: row; +} +.dnb-radio-group .dnb-radio { + margin-right: var(--radio-margin-right); + margin-bottom: var(--radio-margin-bottom); +} +.dnb-radio-group--column .dnb-radio { + display: flex; + margin-right: 0; +} +.dnb-radio-group .dnb-radio:last-of-type { + margin-right: 0; +} +.dnb-radio-group [role=radiogroup], .dnb-radio-group__shell { + display: block; +} +.dnb-radio-group__shell > .dnb-form-status { + margin-top: 0; + margin-bottom: 0; +} +.dnb-radio-group--column .dnb-radio-group__shell { + flex-direction: column; +} +.dnb-radio-group .dnb-form-row { + align-items: flex-start; + margin-bottom: calc(0px - var(--radio-margin-bottom)); +} +.dnb-radio-group .dnb-form-row::before { + font-size: var(--font-size-basis); +} +.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { + border-color: var(--skeleton-color); +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * ToggleButton component * */ +/* + * Utilities + */ :root { --toggle-button-margin-right: 1rem; - --toggle-button-margin-bottom: 1rem; } + --toggle-button-margin-bottom: 1rem; +} .dnb-toggle-button { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-toggle-button__inner { - display: inline-flex; - flex-direction: column; } - .dnb-toggle-button__shell { - position: relative; - left: 0; - user-select: none; - -webkit-user-select: none; } - .dnb-toggle-button--vertical { - flex-direction: column; - align-items: flex-start; } - .dnb-toggle-button__component { - padding-right: 0.5rem; - display: inline-flex; - align-items: center; } - .dnb-toggle-button__button.dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-toggle-button__button .dnb-checkbox { - margin-left: -0.5rem; } - .dnb-toggle-button__button .dnb-checkbox__input { - pointer-events: none; } - .dnb-toggle-button__button .dnb-checkbox__button { - display: unset; } - .dnb-toggle-button__button .dnb-checkbox__focus, .dnb-toggle-button__button .dnb-checkbox__button { - width: calc(var(--checkbox-width--medium) - 0.5rem); - height: calc(var(--checkbox-height--medium) - 0.5rem); - border-width: 0.0625rem; } - .dnb-toggle-button__button .dnb-checkbox__dot { - width: calc(var(--checkbox-width--medium) - 1rem); - height: calc(var(--checkbox-height--medium) - 1rem); } - .dnb-toggle-button__button .dnb-checkbox__gfx { - width: calc(var(--checkbox-width--medium) - 0.75rem); - height: calc(var(--checkbox-height--medium) - 0.75rem); } - .dnb-toggle-button__button .dnb-radio { - margin-left: -0.5rem; } - .dnb-toggle-button__button .dnb-radio__input { - pointer-events: none; } - .dnb-toggle-button__button .dnb-radio__focus, .dnb-toggle-button__button .dnb-radio__button { - width: calc(var(--radio-width--medium) - 0.5rem); - height: calc(var(--radio-height--medium) - 0.5rem); - border-width: 0.0625rem; } - .dnb-toggle-button__button .dnb-radio__dot { - 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 { - background-color: var(--color-emerald-green); - color: var(--color-mint-green); } - :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button { - vertical-align: top; } - .dnb-toggle-button-group__suffix { - font-size: var(--font-size-basis); } - .dnb-toggle-button .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-toggle-button .dnb-form-label { - margin-right: 1rem; } - .dnb-toggle-button-group { - display: inline-flex; } - .dnb-toggle-button-group .dnb-toggle-button { - margin-right: var(--toggle-button-margin-right); - margin-bottom: var(--toggle-button-margin-bottom); } - .dnb-toggle-button-group--column .dnb-toggle-button { - display: flex; - margin-right: 0; } - .dnb-toggle-button-group .dnb-toggle-button:last-of-type { - margin-right: 0; } - .dnb-toggle-button-group__shell { - display: flex; - flex-direction: column; } - .dnb-toggle-button-group__shell__children { - order: 1; } - .dnb-toggle-button-group__shell > .dnb-form-status { - order: 2; - transform: translateY(-0.5rem); } - .dnb-toggle-button-group .dnb-form-row { - align-items: baseline; - margin-bottom: calc(1px - 1px - var(--toggle-button-margin-bottom)); } - .dnb-toggle-button-group .dnb-form-row--vertical-label { - align-items: flex-start; } - .dnb-toggle-button-group .dnb-form-row::before { - font-size: var(--font-size-basis); } - .dnb-toggle-button-group--no-label > .dnb-alignment-helper { - line-height: var(--button-height); } - .dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper { - line-height: var(--button-height); } - @media screen and (min-width: 40em) { - .dnb-form-label + .dnb-toggle-button { - transform: translateY(-0.5rem); } } + line-height: var(--line-height-basis); +} +.dnb-toggle-button__inner { + display: inline-flex; + flex-direction: column; +} +.dnb-toggle-button__shell { + position: relative; + left: 0; + user-select: none; + -webkit-user-select: none; +} +.dnb-toggle-button--vertical { + flex-direction: column; + align-items: flex-start; +} +.dnb-toggle-button__component { + padding-right: 0.5rem; + display: inline-flex; + align-items: center; +} +.dnb-toggle-button__button.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-toggle-button__button .dnb-checkbox { + margin-left: -0.5rem; +} +.dnb-toggle-button__button .dnb-checkbox__input { + pointer-events: none; +} +.dnb-toggle-button__button .dnb-checkbox__button { + display: unset; +} +.dnb-toggle-button__button .dnb-checkbox__focus, .dnb-toggle-button__button .dnb-checkbox__button { + width: calc(var(--checkbox-width--medium) - 0.5rem); + height: calc(var(--checkbox-height--medium) - 0.5rem); + border-width: 0.0625rem; +} +.dnb-toggle-button__button .dnb-checkbox__dot { + width: calc(var(--checkbox-width--medium) - 1rem); + height: calc(var(--checkbox-height--medium) - 1rem); +} +.dnb-toggle-button__button .dnb-checkbox__gfx { + width: calc(var(--checkbox-width--medium) - 0.75rem); + height: calc(var(--checkbox-height--medium) - 0.75rem); +} +.dnb-toggle-button__button .dnb-radio { + margin-left: -0.5rem; +} +.dnb-toggle-button__button .dnb-radio__input { + pointer-events: none; +} +.dnb-toggle-button__button .dnb-radio__focus, .dnb-toggle-button__button .dnb-radio__button { + width: calc(var(--radio-width--medium) - 0.5rem); + height: calc(var(--radio-height--medium) - 0.5rem); + border-width: 0.0625rem; +} +.dnb-toggle-button__button .dnb-radio__dot { + 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 { + background-color: var(--color-emerald-green); + color: var(--color-mint-green); +} +:not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button { + vertical-align: top; +} +.dnb-toggle-button-group__suffix { + font-size: var(--font-size-basis); +} +.dnb-toggle-button .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-toggle-button .dnb-form-label { + margin-right: 1rem; +} +.dnb-toggle-button-group { + display: inline-flex; +} +.dnb-toggle-button-group .dnb-toggle-button { + margin-right: var(--toggle-button-margin-right); + margin-bottom: var(--toggle-button-margin-bottom); +} +.dnb-toggle-button-group--column .dnb-toggle-button { + display: flex; + margin-right: 0; +} +.dnb-toggle-button-group .dnb-toggle-button:last-of-type { + margin-right: 0; +} +.dnb-toggle-button-group__shell { + display: flex; + flex-direction: column; +} +.dnb-toggle-button-group__shell__children { + order: 1; +} +.dnb-toggle-button-group__shell > .dnb-form-status { + order: 2; + transform: translateY(-0.5rem); +} +.dnb-toggle-button-group .dnb-form-row { + align-items: baseline; + margin-bottom: calc(0px - var(--toggle-button-margin-bottom)); +} +.dnb-toggle-button-group .dnb-form-row--vertical-label { + align-items: flex-start; +} +.dnb-toggle-button-group .dnb-form-row::before { + font-size: var(--font-size-basis); +} +.dnb-toggle-button-group--no-label > .dnb-alignment-helper { + line-height: var(--button-height); +} +.dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper { + line-height: var(--button-height); +} +@media screen and (min-width: 40em) { + .dnb-form-label + .dnb-toggle-button { + transform: translateY(-0.5rem); + } +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * DatePicker component * */ +/* + * Utilities + */ :root { --date-picker-input-height: 2rem; --date-picker-day-width: 2rem; - --date-picker-day-horizontal-spacing: 4px; } + --date-picker-day-horizontal-spacing: 4px; +} .dnb-date-picker { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-date-picker__inner { - display: inline-flex; - flex-direction: column; - line-height: var(--date-picker-input-height); } - .dnb-date-picker__row { - display: inline-flex; } - .dnb-date-picker__shell { - position: relative; - top: 0; - display: inline-flex; - flex-direction: column; } - .dnb-date-picker__input__wrapper { - display: inline-flex; - white-space: nowrap; - height: inherit; } - .dnb-date-picker__container { - position: absolute; - display: block; - z-index: 3; - left: -1rem; - top: var(--date-picker-input-height); } - .dnb-date-picker--small .dnb-date-picker__container { - top: var(--input-height--small); } - .dnb-date-picker--medium .dnb-date-picker__container { - top: var(--input-height--medium); } - .dnb-date-picker--large .dnb-date-picker__container { - top: var(--input-height--large); } - .dnb-date-picker--show-input .dnb-date-picker__container { - left: 0; } - .dnb-date-picker--right .dnb-date-picker__container { - left: auto; - right: -1rem; } - .dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container { - left: auto; - right: 0; } - .dnb-date-picker--opened .dnb-date-picker__container { - z-index: 100; } - .dnb-date-picker--opened .dnb-date-picker__container { - animation: date-picker-slide-down 200ms ease-out 1 forwards; } - html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container, .dnb-date-picker--opened .dnb-date-picker__container--no-animation { - animation: date-picker-slide-down 1ms ease-out 1 forwards; } - .dnb-date-picker--hidden .dnb-date-picker__container { - display: none; } - .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container { - animation: date-picker-slide-up 150ms ease-out 1 forwards; } - html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container, .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation { - animation: date-picker-slide-up 1ms ease-out 1 forwards; } + line-height: var(--line-height-basis); +} +.dnb-date-picker__inner { + display: inline-flex; + flex-direction: column; + line-height: var(--date-picker-input-height); +} +.dnb-date-picker__row { + display: inline-flex; +} +.dnb-date-picker__shell { + position: relative; + top: 0; + display: inline-flex; + flex-direction: column; +} +.dnb-date-picker__input__wrapper { + display: inline-flex; + white-space: nowrap; + height: inherit; +} +.dnb-date-picker__container { + position: absolute; + display: block; + z-index: 3; + left: -1rem; + top: var(--date-picker-input-height); +} +.dnb-date-picker--small .dnb-date-picker__container { + top: var(--input-height--small); +} +.dnb-date-picker--medium .dnb-date-picker__container { + top: var(--input-height--medium); +} +.dnb-date-picker--large .dnb-date-picker__container { + top: var(--input-height--large); +} +.dnb-date-picker--show-input .dnb-date-picker__container { + left: 0; +} +.dnb-date-picker--right .dnb-date-picker__container { + left: auto; + right: -1rem; +} +.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container { + left: auto; + right: 0; +} +.dnb-date-picker--opened .dnb-date-picker__container { + z-index: 100; +} +.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation) { + animation: date-picker-slide-down 200ms ease-out 1 forwards; +} +html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container, .dnb-date-picker--opened .dnb-date-picker__container--no-animation { + animation: date-picker-slide-down 1ms ease-out 1 forwards; +} +.dnb-date-picker--hidden .dnb-date-picker__container { + display: none; +} +.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation) { + animation: date-picker-slide-up 150ms ease-out 1 forwards; +} +html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container, .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation { + animation: date-picker-slide-up 1ms ease-out 1 forwards; +} +.dnb-date-picker__input, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input, .dnb-core-style .dnb-date-picker__input { + display: inline-block; + width: auto; + margin: 0; + padding: 0 0.125rem; + transform: translateY(0); + outline: none; + font-family: var(--font-family-monospace); + text-align: center; + border: none; + background: transparent; + overflow: visible; + white-space: nowrap; +} +@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) { + .dnb-date-picker__input, + .dnb-date-picker .dnb-input__input.dnb-date-picker__input, .dnb-core-style .dnb-date-picker__input { + margin: 0 -4px; + } +} +@supports (-ms-ime-align: auto) { .dnb-date-picker__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input, - .dnb-core-style .dnb-date-picker__input { - display: inline-block; - width: auto; + .dnb-date-picker .dnb-input__input.dnb-date-picker__input, .dnb-core-style .dnb-date-picker__input { + margin: 0 -5px; + } +} +@supports (-webkit-touch-callout: none) { + .dnb-date-picker__input:not(*:root), + .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root), .dnb-core-style .dnb-date-picker__input:not(*:root) { margin: 0; - padding: 0 0.125rem; - transform: translateY(0); - outline: none; - font-family: var(--font-family-monospace); - text-align: center; - border: none; - background: transparent; - overflow: visible; - white-space: nowrap; } - @supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) { - .dnb-date-picker__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input, - .dnb-core-style .dnb-date-picker__input { - margin: 0 -4px; } } - @supports (-ms-ime-align: auto) { - .dnb-date-picker__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input, - .dnb-core-style .dnb-date-picker__input { - margin: 0 -5px; } } - @supports (-webkit-touch-callout: none) { - .dnb-date-picker__input:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root), - .dnb-core-style .dnb-date-picker__input:not(*:root) { - margin: 0; } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-date-picker__input:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root), - .dnb-core-style .dnb-date-picker__input:not(*:root) { - margin: 0 -4px; } - .dnb-date-picker__input:first-of-type:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(*:root), - .dnb-core-style .dnb-date-picker__input:first-of-type:not(*:root) { - margin-left: 0.8rem; } - .dnb-date-picker__input:last-of-type:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root), - .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) { - margin-right: 2.2rem; } } - .dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input, - .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small, - .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element - .dnb-core-style .dnb-date-picker__input--small__input { - padding-right: 0.125rem; } - .dnb-date-picker__input--small:last-of-type:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(*:root), - .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(*:root) { - margin-right: 2.2rem; } - .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input, - .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium, - .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element - .dnb-core-style .dnb-date-picker__input--medium__input { - padding-right: 0.125rem; } - .dnb-date-picker__input--medium:last-of-type:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(*:root), - .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(*:root) { - margin-right: 3.2rem; } - .dnb-date-picker__input--large.dnb-date-picker__input--large, .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large, - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input, - .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large, - .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element - .dnb-core-style .dnb-date-picker__input--large__input { - padding-right: 0.125rem; } - .dnb-date-picker__input--large:last-of-type:not(*:root), - .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(*:root), - .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(*:root) { - margin-right: 4rem; } - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type, .dnb-date-picker__input:first-of-type { - margin-left: 0.8rem; } - .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type, .dnb-date-picker__input:last-of-type { - margin-right: 2.2rem; } - .dnb-date-picker .dnb-input__shell { - display: none; } - .dnb-date-picker--show-input .dnb-input__shell { - display: flex; } - .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell { - box-shadow: none; } - .dnb-input__submit-button button:focus ~ .dnb-date-picker__input__wrapper { - display: block; } - .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element, - .dnb-input__submit-element > .dnb-date-picker .dnb-input__submit-element { - margin-left: 0; } + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-date-picker__input:not(*:root), + .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root), .dnb-core-style .dnb-date-picker__input:not(*:root) { + margin: 0 -4px; + } + .dnb-date-picker__input:first-of-type:not(*:root), + .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(*:root), .dnb-core-style .dnb-date-picker__input:first-of-type:not(*:root) { + margin-left: 0.8rem; + } + .dnb-date-picker__input:last-of-type:not(*:root), + .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root), .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) { + margin-right: 2.2rem; + } +} +.dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, +.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input, .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input { + padding-right: 0.125rem; +} +.dnb-date-picker__input--small:last-of-type:not(*:root), +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(*:root), .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(*:root) { + margin-right: 2.2rem; +} +.dnb-date-picker__input--medium.dnb-date-picker__input--medium, .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, +.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input, .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input { + padding-right: 0.125rem; +} +.dnb-date-picker__input--medium:last-of-type:not(*:root), +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(*:root), .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(*:root) { + margin-right: 3.2rem; +} +.dnb-date-picker__input--large.dnb-date-picker__input--large, .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large, +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, +.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input, .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input { + padding-right: 0.125rem; +} +.dnb-date-picker__input--large:last-of-type:not(*:root), +.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(*:root), .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(*:root) { + margin-right: 4rem; +} +.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type, .dnb-date-picker__input:first-of-type { + margin-left: 0.8rem; +} +.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type, .dnb-date-picker__input:last-of-type { + margin-right: 2.2rem; +} +.dnb-date-picker .dnb-input__shell { + display: none; +} +.dnb-date-picker--show-input .dnb-input__shell { + display: flex; +} +.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell { + box-shadow: none; +} +.dnb-input__submit-button button:focus ~ .dnb-date-picker__input__wrapper { + display: block; +} +.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element, .dnb-input__submit-element > .dnb-date-picker .dnb-input__submit-element { + margin-left: 0; +} +.dnb-date-picker__views { + display: flex; + user-select: none; + -webkit-user-select: none; +} +@media screen and (max-width: 60em) { .dnb-date-picker__views { - display: flex; - user-select: none; - -webkit-user-select: none; } - @media screen and (max-width: 60em) { - .dnb-date-picker__views { - flex-direction: column; } } - .dnb-date-picker__calendar { - position: relative; - padding: 1rem; } - .dnb-date-picker__calendar::after { - content: ''; - position: absolute; - bottom: 0; - width: calc(100% - 2rem); - height: 1px; } - .dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar::after { - content: none; } - .dnb-date-picker__header { - height: 2.5rem; - line-height: var(--line-height-basis); } - .dnb-date-picker__addon, .dnb-date-picker__header { - position: relative; - display: flex; - justify-content: space-between; - padding-bottom: 1rem; } - .dnb-date-picker__addon::after, .dnb-date-picker__header::after { - content: ''; - position: absolute; - bottom: 0; - width: 100%; - height: 1px; } - .dnb-date-picker__addon { - display: block; - padding: 1rem; } - .dnb-date-picker__addon::after { - left: 1rem; - width: calc(100% - 2rem); } - .dnb-date-picker__footer { - position: relative; - display: flex; - justify-content: space-between; - padding: 1rem; } - .dnb-date-picker__labels__day { - padding-top: 1.5rem; - padding-bottom: 0.5rem; } - .dnb-date-picker__labels, .dnb-date-picker__days { - min-width: 18rem; - max-width: 18rem; - display: flex; + flex-direction: column; + } +} +.dnb-date-picker__calendar { + position: relative; + padding: 1rem; +} +.dnb-date-picker__calendar::after { + content: ""; + position: absolute; + bottom: 0; + width: calc(100% - 2rem); + height: 1px; +} +.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar::after { + content: none; +} +.dnb-date-picker__header { + height: 2.5rem; + line-height: var(--line-height-basis); +} +.dnb-date-picker__addon, .dnb-date-picker__header { + position: relative; + display: flex; + justify-content: space-between; + padding-bottom: 1rem; +} +.dnb-date-picker__addon::after, .dnb-date-picker__header::after { + content: ""; + position: absolute; + bottom: 0; + width: 100%; + height: 1px; +} +.dnb-date-picker__addon { + display: block; + padding: 1rem; +} +.dnb-date-picker__addon::after { + left: 1rem; + width: calc(100% - 2rem); +} +.dnb-date-picker__footer { + position: relative; + display: flex; + justify-content: space-between; + padding: 1rem; +} +.dnb-date-picker__labels__day { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.dnb-date-picker__labels, .dnb-date-picker__days { + min-width: 18rem; + max-width: 18rem; + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; +} +.dnb-date-picker table { + position: relative; + z-index: 1; + margin: 0; +} +.dnb-date-picker table.dnb-no-focus:focus { + outline: none; +} +html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-date-picker__day, .dnb-date-picker__labels__day { + display: flex; + flex-basis: 14.2857142857%; + justify-content: center; +} +.dnb-date-picker__day { + position: relative; + width: var(--date-picker-day-width); + height: var(--date-picker-day-width); + margin: var(--date-picker-day-horizontal-spacing) 0; +} +.dnb-date-picker__day .dnb-button { + position: absolute; + top: 0; + width: var(--date-picker-day-width); + height: var(--date-picker-day-width); + white-space: nowrap; + box-shadow: none; +} +.dnb-date-picker__day .dnb-button__bounding { + border-radius: 0; + transform: scale(1.28); +} +.dnb-date-picker__day .dnb-button__text { + transform: translateY(0); +} +.dnb-date-picker__day--selectable:hover { + z-index: 2; +} +.dnb-date-picker__day--start-date .dnb-button, .dnb-date-picker__day--end-date .dnb-button { + z-index: 1; +} +.dnb-date-picker__day--start-date, .dnb-date-picker__day--end-date { + position: relative; +} +.dnb-date-picker__day--start-date::after, .dnb-date-picker__day--end-date::after { + content: ""; + position: absolute; + top: 0; + width: calc(var(--date-picker-day-width) / 2); + height: 100%; +} +.dnb-date-picker__day--start-date::after { + left: auto; + right: 0; +} +.dnb-date-picker__day--end-date::after { + left: 0; + right: auto; +} +.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date::after { + content: none; +} +.dnb-date-picker__triangle { + pointer-events: none; + position: absolute; + top: calc(2px - var(--date-picker-input-height) / 2); + left: 0; + right: auto; + margin: 0 1.5rem; + width: calc(var(--date-picker-input-height) / 2); + height: calc(var(--date-picker-input-height) / 2); + overflow: hidden; +} +.dnb-date-picker__triangle::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: calc(var(--date-picker-input-height) / 2); + height: calc(var(--date-picker-input-height) / 2); + transform: translateY(60%) rotate(45deg); + border: 1px solid var(--color-black-border); + background-color: var(--color-white); +} +.dnb-date-picker--right .dnb-date-picker__triangle { + left: auto; + right: 0; +} +.dnb-date-picker .rtl { + direction: rtl; +} +.dnb-date-picker .rtl .dnb-date-picker__prev::before { + transform: scaleX(-1); +} +.dnb-date-picker .rtl .dnb-date-picker__next::before { + transform: scaleX(-1); +} +.dnb-date-picker__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-date-picker--vertical { + display: flex; + align-items: flex-start; + flex-direction: column; +} +.dnb-date-picker > .dnb-form-label { + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-date-picker { flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; } - .dnb-date-picker table { - position: relative; - z-index: 1; - margin: 0; } - .dnb-date-picker table.dnb-no-focus:focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-date-picker table.dnb-no-focus:focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-date-picker__day, .dnb-date-picker__labels__day { - display: flex; - flex-basis: calc(1 / 7 * 100%); - justify-content: center; } - .dnb-date-picker__day { - position: relative; - width: var(--date-picker-day-width); - height: var(--date-picker-day-width); - margin: var(--date-picker-day-horizontal-spacing) 0; } - .dnb-date-picker__day .dnb-button { - position: absolute; - top: 0; - width: var(--date-picker-day-width); - height: var(--date-picker-day-width); - white-space: nowrap; - box-shadow: none; } - .dnb-date-picker__day .dnb-button__bounding { - border-radius: 0; - transform: scale(1.28); } - .dnb-date-picker__day .dnb-button__text { - transform: translateY(0); } - .dnb-date-picker__day--selectable:hover { - z-index: 2; } - .dnb-date-picker__day--start-date .dnb-button, - .dnb-date-picker__day--end-date .dnb-button { - z-index: 1; } - .dnb-date-picker__day--start-date, .dnb-date-picker__day--end-date { - position: relative; } - .dnb-date-picker__day--start-date::after, .dnb-date-picker__day--end-date::after { - content: ''; - position: absolute; - top: 0; - width: calc(var(--date-picker-day-width) / 2); - height: 100%; } - .dnb-date-picker__day--start-date::after { - left: auto; - right: 0; } - .dnb-date-picker__day--end-date::after { - left: 0; - right: auto; } - .dnb-date-picker__day--start-date.dnb-date-picker__day--end-date::after { - content: none; } - .dnb-date-picker__triangle { - pointer-events: none; - position: absolute; - top: calc(1px + 1px - var(--date-picker-input-height) / 2); - left: 0; - right: auto; - margin: 0 1.5rem; - width: calc(var(--date-picker-input-height) / 2); - height: calc(var(--date-picker-input-height) / 2); - overflow: hidden; } - .dnb-date-picker__triangle::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: calc(var(--date-picker-input-height) / 2); - height: calc(var(--date-picker-input-height) / 2); - transform: translateY(60%) rotate(45deg); - border: 1px solid var(--color-black-border); - background-color: var(--color-white); } - .dnb-date-picker--right .dnb-date-picker__triangle { - left: auto; - right: 0; } - .dnb-date-picker .rtl { - direction: rtl; } - .dnb-date-picker .rtl .dnb-date-picker__prev::before { - transform: scaleX(-1); } - .dnb-date-picker .rtl .dnb-date-picker__next::before { - transform: scaleX(-1); } - .dnb-date-picker__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-date-picker--vertical { - display: flex; - align-items: flex-start; - flex-direction: column; } + } .dnb-date-picker > .dnb-form-label { - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-date-picker { - flex-wrap: wrap; } - .dnb-date-picker > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-date-picker--stretch { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-date-picker--stretch { + display: flex; + flex-grow: 1; +} +.dnb-date-picker--stretch .dnb-date-picker__inner, .dnb-date-picker--stretch .dnb-date-picker__shell { + width: 100%; +} +.dnb-form-row--horizontal .dnb-date-picker--stretch { + width: 100%; +} +.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button { + border-radius: 50%; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-date-picker { display: flex; - flex-grow: 1; } - .dnb-date-picker--stretch .dnb-date-picker__inner, .dnb-date-picker--stretch .dnb-date-picker__shell { - width: 100%; } - .dnb-form-row--horizontal .dnb-date-picker--stretch { - width: 100%; } - .dnb-date-picker:not(.dnb-date-picker--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-date-picker:not(.dnb-date-picker--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button -.dnb-button { - border-radius: 50%; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-date-picker { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-date-picker > .dnb-form-label { - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-date-picker__helper { - display: none; } } - .dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton { - visibility: hidden; } - .dnb-date-picker__fieldset, - .dnb-core-style .dnb-date-picker__fieldset { - margin: 0; - padding: 0; - border: none; } + flex-direction: column; + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-date-picker > .dnb-form-label { + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-date-picker__helper { + display: none; + } +} +.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton { + visibility: hidden; +} +.dnb-date-picker__fieldset, .dnb-core-style .dnb-date-picker__fieldset { + margin: 0; + padding: 0; + border: none; +} @keyframes date-picker-slide-down { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes date-picker-slide-up { from { - opacity: 1; } + opacity: 1; + } to { - opacity: 0; } } -" + opacity: 0; + } +}" `; 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 62cff1d37d4..23e6852d36c 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 @@ -1348,22 +1348,37 @@ exports[`Dialog scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1371,63 +1386,81 @@ exports[`Dialog scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1438,156 +1471,205 @@ exports[`Dialog scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1605,7 +1687,8 @@ exports[`Dialog scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1623,155 +1706,199 @@ exports[`Dialog scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * HelpButton component @@ -1783,6 +1910,9 @@ button.dnb-button::-moz-focus-inner { * Modal component * */ +/* + * Utilities + */ /* * Modal component * @@ -1790,159 +1920,290 @@ button.dnb-button::-moz-focus-inner { @keyframes show-modal { from { opacity: 0.1; - transform: translate3d(0, -1rem, 0); } + transform: translate3d(0, -1rem, 0); + } to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 1rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-drawer { to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-drawer-left { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(-20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-top { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, -20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-bottom { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-right { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-modal-overlay { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal-overlay { from { - opacity: 1; } + opacity: 1; + } to { - opacity: 0; } } - + opacity: 0; + } +} :root { --modal-z-index: 3000; - --modal-animation-duration: 300ms; } + --modal-animation-duration: 300ms; +} html[data-dnb-modal-active] { user-select: none; - -webkit-user-select: none; } + -webkit-user-select: none; +} #dnb-modal-root { position: absolute; top: 0; - left: 0; } + left: 0; +} .dnb-modal { - /* stylelint-disable-next-line */ } - .dnb-modal__content { - position: fixed; - top: 0; - left: 0; - z-index: calc(var(--modal-z-index) + 1); - display: flex; - align-items: center; - justify-content: center; - max-width: 100vw; - width: 100%; - height: 100%; - user-select: none; - -webkit-user-select: none; } - @media screen and (max-width: 40em) { - .dnb-modal__content--auto-fullscreen { - height: auto; } } - .dnb-modal__content--fullscreen { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--fullscreen .dnb-modal__content__content { - height: auto; } - .dnb-modal__content--left, .dnb-modal__content--top { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--right { - align-items: flex-start; - justify-content: flex-end; } - .dnb-modal__content--bottom { - align-items: flex-end; - justify-content: flex-start; } - .dnb-modal__overlay { - position: fixed; - z-index: var(--modal-z-index); - left: 0; - top: 0; - width: 100%; - height: 100%; } - .dnb-modal-root__inner .dnb-modal__overlay { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { - animation-delay: 0ms !important; - animation-duration: 0ms !important; } - .dnb-modal-root__inner { - position: relative; - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 2); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 3); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 4); } - .dnb-modal__close-button { - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal__header__bar.dnb-section { - display: flex; - flex-direction: row; - justify-content: space-between; } + /* stylelint-disable-next-line */ +} +.dnb-modal__content { + position: fixed; + top: 0; + left: 0; + z-index: calc(var(--modal-z-index) + 1); + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + width: 100%; + height: 100%; + user-select: none; + -webkit-user-select: none; +} +@media screen and (max-width: 40em) { + .dnb-modal__content--auto-fullscreen { + height: auto; + } +} +.dnb-modal__content--fullscreen { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--fullscreen .dnb-modal__content__content { + height: auto; +} +.dnb-modal__content--left, .dnb-modal__content--top { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--right { + align-items: flex-start; + justify-content: flex-end; +} +.dnb-modal__content--bottom { + align-items: flex-end; + justify-content: flex-start; +} +.dnb-modal__overlay { + position: fixed; + z-index: var(--modal-z-index); + left: 0; + top: 0; + width: 100%; + height: 100%; +} +.dnb-modal-root__inner .dnb-modal__overlay { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay { + animation: show-modal-overlay var(--modal-animation-duration) ease-out; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { + animation-delay: 0ms !important; + animation-duration: 0ms !important; +} +.dnb-modal-root__inner { + position: relative; + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 2); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 3); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 4); +} +.dnb-modal__close-button { + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal__header__bar.dnb-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} [data-visual-test].hide-page-content #___gatsby { - opacity: 0; } + opacity: 0; +} /* * Dialog component * */ +/* + * Utilities + */ +/* + * Modal component + * + */ +@keyframes show-modal { + from { + 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; + } +} +@keyframes show-drawer { + to { + transform: translate3d(0, 0, 0); + 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; + } +} +@keyframes show-modal-overlay { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-modal-overlay { + from { + opacity: 1; + } + to { + opacity: 0; + } +} :root { --dialog-min-width: 320px; --dialog-avg-width: 60vw; --dialog-max-width: 49rem; --dialog-confirm-max-width: 40rem; --dialog-spacing: 2rem; - --dialog-spacing-minus: -2rem; } + --dialog-spacing-minus: -2rem; +} .dnb-dialog { position: relative; @@ -1953,140 +2214,186 @@ html[data-dnb-modal-active] { border: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-height: 100vh; - overflow: hidden; } - .dnb-dialog .dnb-scroll-view { - max-height: 90vh; } - .dnb-dialog__inner { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; } - .dnb-dialog--information { - width: var(--dialog-avg-width); - min-width: var(--dialog-min-width); - max-width: var(--dialog-max-width); } - .dnb-dialog--confirmation { - max-width: var(--dialog-confirm-max-width); - margin-left: 1rem; - margin-right: 1rem; } - @media screen and (max-width: 40em) { - .dnb-dialog--auto-fullscreen { - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - border-radius: 0; - box-shadow: none; - margin: auto 0; } } - .dnb-dialog--fullscreen { + overflow: hidden; +} +.dnb-dialog .dnb-scroll-view { + max-height: 90vh; +} +.dnb-dialog__inner { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} +.dnb-dialog--information { + width: var(--dialog-avg-width); + min-width: var(--dialog-min-width); + max-width: var(--dialog-max-width); +} +.dnb-dialog--confirmation { + max-width: var(--dialog-confirm-max-width); + margin-left: 1rem; + margin-right: 1rem; +} +@media screen and (max-width: 40em) { + .dnb-dialog--auto-fullscreen { width: 100%; height: 100vh; max-width: 100%; max-height: 100vh; border-radius: 0; box-shadow: none; - margin: auto 0; } - .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content { - padding-bottom: calc(var(--dialog-spacing) * 2); } + margin: auto 0; + } +} +.dnb-dialog--fullscreen { + width: 100%; + height: 100vh; + max-width: 100%; + max-height: 100vh; + border-radius: 0; + box-shadow: none; + margin: auto 0; +} +.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content { + padding-bottom: calc(var(--dialog-spacing) * 2); +} +.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner { + padding-left: calc(var(--dialog-spacing) * 1.75); + padding-right: calc(var(--dialog-spacing) * 1.75); +} +@media screen and (max-width: 72em) { .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner { - padding-left: calc(var(--dialog-spacing) * 1.75); - padding-right: calc(var(--dialog-spacing) * 1.75); } - @media screen and (max-width: 72em) { - .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner { - padding-left: calc(var(--dialog-spacing)); - padding-right: calc(var(--dialog-spacing)); } } - @media screen and (max-width: 40em) { - .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner { - padding-left: calc(var(--dialog-spacing) / 2); - padding-right: calc(var(--dialog-spacing) / 2); } } + padding-left: calc(var(--dialog-spacing)); + padding-right: calc(var(--dialog-spacing)); + } +} +@media screen and (max-width: 40em) { + .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner { + padding-left: calc(var(--dialog-spacing) / 2); + padding-right: calc(var(--dialog-spacing) / 2); + } +} +.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section { + margin-top: calc(var(--dialog-spacing)); + margin-bottom: calc(var(--dialog-spacing) / 2); +} +@media screen and (max-width: 60em) { .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section { - margin-top: calc(var(--dialog-spacing)); - margin-bottom: calc(var(--dialog-spacing) / 2); } - @media screen and (max-width: 60em) { - .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section { - margin-top: calc(var(--dialog-spacing) / 2); } } - .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner { - padding: calc(var(--dialog-spacing)); } - .dnb-dialog__align--centered .dnb-dialog__inner { - align-items: center; - justify-content: center; } - .dnb-dialog__align--centered .dnb-dialog__title, - .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content { - text-align: center; } - .dnb-dialog__content { - position: relative; - z-index: 1; } - .dnb-dialog__actions { - padding-top: 1.5rem; - display: flex; - justify-content: center; - width: 100%; } - .dnb-dialog__actions > :not(:last-child) { - margin-right: 1rem; } - .dnb-dialog--information .dnb-dialog__actions { - justify-content: left; } - .dnb-dialog__align--center .dnb-dialog__content { - align-items: center; - text-align: center; } - .dnb-dialog__align--right .dnb-dialog__content { - align-items: flex-end; - text-align: right; } - .dnb-dialog__title ~ .dnb-dialog__content { - padding-top: calc(var(--dialog-spacing) / 2); } - @media screen and (max-width: 60em) { - .dnb-dialog__title { - font-size: var(--font-size-large) !important; - line-height: var(--line-height-medium) !important; } } - @media screen and (max-width: 40em) { - .dnb-dialog__title { - font-size: var(--font-size-medium) !important; - line-height: calc(var(--line-height-medium) - 0.25rem) !important; } } - .dnb-dialog--information .dnb-dialog__title { - margin-bottom: var(--spacing-small) !important; } - .dnb-dialog--confirmation .dnb-dialog__title { - margin-bottom: var(--spacing-x-small) !important; } - .dnb-dialog__navigation.dnb-section { - display: flex; - flex-direction: row; - justify-content: space-between; } - html:not([data-visual-test]) .dnb-dialog { - animation: show-modal var(--modal-animation-duration) ease-out; } - html:not([data-visual-test]) .dnb-dialog--hide { - animation: hide-modal 220ms ease-in-out forwards; } - .dnb-dialog--no-animation { - animation-duration: 0ms !important; } - @media screen and (max-width: 40em) { - .dnb-dialog--no-animation-on-mobile { - animation-delay: 0ms !important; - animation-duration: 0ms !important; } } - .dnb-dialog__body { - padding-bottom: calc(var(--dialog-spacing) * 2); - margin-bottom: calc(var(--dialog-spacing-minus) * 2); } - .dnb-dialog__header::after { - top: -500%; - height: 600%; } - .dnb-dialog__header [class*='dnb-h--'], - .dnb-dialog__header .dnb-modal__title { - padding: 0; } - .dnb-dialog__header [class*='dnb-h--']:not([class*='__top']), - .dnb-dialog__header .dnb-modal__title:not([class*='__top']) { - margin-top: 0; } - .dnb-dialog__header [class*='dnb-h--']:not([class*='__bottom']), - .dnb-dialog__header .dnb-modal__title:not([class*='__bottom']) { - margin-bottom: 0; } - .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs { - margin-top: 3.5rem; } - .dnb-dialog__icon { - display: flex; } - .dnb-dialog__icon ~ .dnb-dialog__header { - margin-top: 1.5rem; } - @supports (-webkit-touch-callout: none) { - @media (max-height: 40em) { - .dnb-dialog .dnb-scroll-view { - max-height: 82vh; } } } + margin-top: calc(var(--dialog-spacing) / 2); + } +} +.dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner { + padding: calc(var(--dialog-spacing)); +} +.dnb-dialog__align--centered .dnb-dialog__inner { + align-items: center; + justify-content: center; +} +.dnb-dialog__align--centered .dnb-dialog__title, .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content { + text-align: center; +} +.dnb-dialog__content { + position: relative; + z-index: 1; +} +.dnb-dialog__actions { + padding-top: 1.5rem; + display: flex; + justify-content: center; + width: 100%; +} +.dnb-dialog__actions > :not(:last-child) { + margin-right: 1rem; +} +.dnb-dialog--information .dnb-dialog__actions { + justify-content: left; +} +.dnb-dialog__align--center .dnb-dialog__content { + align-items: center; + text-align: center; +} +.dnb-dialog__align--right .dnb-dialog__content { + align-items: flex-end; + text-align: right; +} +.dnb-dialog__title ~ .dnb-dialog__content { + padding-top: calc(var(--dialog-spacing) / 2); +} +@media screen and (max-width: 60em) { + .dnb-dialog__title { + font-size: var(--font-size-large) !important; + line-height: var(--line-height-medium) !important; + } +} +@media screen and (max-width: 40em) { + .dnb-dialog__title { + font-size: var(--font-size-medium) !important; + line-height: calc(var(--line-height-medium) - 0.25rem) !important; + } +} +.dnb-dialog--information .dnb-dialog__title { + margin-bottom: var(--spacing-small) !important; +} +.dnb-dialog--confirmation .dnb-dialog__title { + margin-bottom: var(--spacing-x-small) !important; +} +.dnb-dialog__navigation.dnb-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} +html:not([data-visual-test]) .dnb-dialog { + animation: show-modal var(--modal-animation-duration) ease-out; +} +html:not([data-visual-test]) .dnb-dialog--hide { + animation: hide-modal 220ms ease-in-out forwards; +} +.dnb-dialog--no-animation { + animation-duration: 0ms !important; +} +@media screen and (max-width: 40em) { + .dnb-dialog--no-animation-on-mobile { + animation-delay: 0ms !important; + animation-duration: 0ms !important; + } +} +.dnb-dialog__body { + padding-bottom: calc(var(--dialog-spacing) * 2); + margin-bottom: calc(var(--dialog-spacing-minus) * 2); +} +.dnb-dialog__header::after { + top: -500%; + height: 600%; +} +.dnb-dialog__header [class*=dnb-h--], .dnb-dialog__header .dnb-modal__title { + padding: 0; +} +.dnb-dialog__header [class*=dnb-h--]:not([class*=__top]), .dnb-dialog__header .dnb-modal__title:not([class*=__top]) { + margin-top: 0; +} +.dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]), .dnb-dialog__header .dnb-modal__title:not([class*=__bottom]) { + margin-bottom: 0; +} +.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs { + margin-top: 3.5rem; +} +.dnb-dialog__icon { + display: flex; +} +.dnb-dialog__icon ~ .dnb-dialog__header { + margin-top: 1.5rem; +} +@supports (-webkit-touch-callout: none) { + @media (max-height: 40em) { + .dnb-dialog .dnb-scroll-view { + max-height: 82vh; + } + } +} [data-visual-test].hide-page-content #___gatsby { - opacity: 0; } -" + opacity: 0; +}" `; 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 cffbcc44cba..f57b8f66038 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 @@ -1365,22 +1365,37 @@ exports[`Drawer scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1388,63 +1403,81 @@ exports[`Drawer scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1455,156 +1488,205 @@ exports[`Drawer scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1622,7 +1704,8 @@ exports[`Drawer scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1640,155 +1723,199 @@ exports[`Drawer scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * HelpButton component @@ -1800,6 +1927,9 @@ button.dnb-button::-moz-focus-inner { * Modal component * */ +/* + * Utilities + */ /* * Modal component * @@ -1807,158 +1937,289 @@ button.dnb-button::-moz-focus-inner { @keyframes show-modal { from { opacity: 0.1; - transform: translate3d(0, -1rem, 0); } + transform: translate3d(0, -1rem, 0); + } to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 1rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-drawer { to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-drawer-left { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(-20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-top { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, -20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-bottom { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-right { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-modal-overlay { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal-overlay { from { - opacity: 1; } + opacity: 1; + } to { - opacity: 0; } } - + opacity: 0; + } +} :root { --modal-z-index: 3000; - --modal-animation-duration: 300ms; } + --modal-animation-duration: 300ms; +} html[data-dnb-modal-active] { user-select: none; - -webkit-user-select: none; } + -webkit-user-select: none; +} #dnb-modal-root { position: absolute; top: 0; - left: 0; } + left: 0; +} .dnb-modal { - /* stylelint-disable-next-line */ } - .dnb-modal__content { - position: fixed; - top: 0; - left: 0; - z-index: calc(var(--modal-z-index) + 1); - display: flex; - align-items: center; - justify-content: center; - max-width: 100vw; - width: 100%; - height: 100%; - user-select: none; - -webkit-user-select: none; } - @media screen and (max-width: 40em) { - .dnb-modal__content--auto-fullscreen { - height: auto; } } - .dnb-modal__content--fullscreen { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--fullscreen .dnb-modal__content__content { - height: auto; } - .dnb-modal__content--left, .dnb-modal__content--top { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--right { - align-items: flex-start; - justify-content: flex-end; } - .dnb-modal__content--bottom { - align-items: flex-end; - justify-content: flex-start; } - .dnb-modal__overlay { - position: fixed; - z-index: var(--modal-z-index); - left: 0; - top: 0; - width: 100%; - height: 100%; } - .dnb-modal-root__inner .dnb-modal__overlay { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { - animation-delay: 0ms !important; - animation-duration: 0ms !important; } - .dnb-modal-root__inner { - position: relative; - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 2); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 3); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 4); } - .dnb-modal__close-button { - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal__header__bar.dnb-section { - display: flex; - flex-direction: row; - justify-content: space-between; } + /* stylelint-disable-next-line */ +} +.dnb-modal__content { + position: fixed; + top: 0; + left: 0; + z-index: calc(var(--modal-z-index) + 1); + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + width: 100%; + height: 100%; + user-select: none; + -webkit-user-select: none; +} +@media screen and (max-width: 40em) { + .dnb-modal__content--auto-fullscreen { + height: auto; + } +} +.dnb-modal__content--fullscreen { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--fullscreen .dnb-modal__content__content { + height: auto; +} +.dnb-modal__content--left, .dnb-modal__content--top { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--right { + align-items: flex-start; + justify-content: flex-end; +} +.dnb-modal__content--bottom { + align-items: flex-end; + justify-content: flex-start; +} +.dnb-modal__overlay { + position: fixed; + z-index: var(--modal-z-index); + left: 0; + top: 0; + width: 100%; + height: 100%; +} +.dnb-modal-root__inner .dnb-modal__overlay { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay { + animation: show-modal-overlay var(--modal-animation-duration) ease-out; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { + animation-delay: 0ms !important; + animation-duration: 0ms !important; +} +.dnb-modal-root__inner { + position: relative; + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 2); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 3); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 4); +} +.dnb-modal__close-button { + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal__header__bar.dnb-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} [data-visual-test].hide-page-content #___gatsby { - opacity: 0; } + opacity: 0; +} /* * Drawer component * */ +/* + * Utilities + */ +/* + * Modal component + * + */ +@keyframes show-modal { + from { + 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; + } +} +@keyframes show-drawer { + to { + transform: translate3d(0, 0, 0); + 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; + } +} +@keyframes show-modal-overlay { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-modal-overlay { + from { + opacity: 1; + } + to { + opacity: 0; + } +} :root { --drawer-width: 40vw; --drawer-min-width: 25rem; --drawer-max-width: 40rem; --drawer-spacing: 2rem; - --drawer-spacing-minus: -2rem; } + --drawer-spacing-minus: -2rem; +} .dnb-drawer { position: relative; @@ -1976,176 +2237,238 @@ html[data-dnb-modal-active] { user-select: text; -webkit-user-select: text; border: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - @media screen and (max-width: 40em) { - .dnb-drawer { - width: 100vw; - min-width: auto; - max-width: auto; } } - @media screen and (max-width: 40em) { - .dnb-drawer--auto-fullscreen { - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - border-radius: 0; - box-shadow: none; } } - .dnb-drawer__inner { - position: relative; - display: flex; - flex-direction: column; - z-index: 10; - /** - NB: Do not use "overflow-x: hidden;" in here, - (overflowing one direction, will influence the other – we can't just have one at a time) - To make the Drawer scroll, we use .dnb-scroll-view - */ - width: 100%; - height: calc(100% - var(--header-height, 0)); - /** Sets the color on scroll overflow (at the bottom) */ - background-color: var(--modal-background-color, transparent); } - .dnb-drawer__align--centered .dnb-drawer__inner { - align-items: center; - justify-content: center; } - .dnb-drawer__content { - position: relative; - z-index: 1; } - .dnb-drawer--spacing .dnb-drawer__content { - padding: 0 var(--drawer-spacing); } - @media screen and (min-width: 80em) { - .dnb-drawer--spacing .dnb-drawer__content { - padding: 0 calc(var(--drawer-spacing) * 1.75); } } - @media screen and (max-width: 60em) { - .dnb-drawer--spacing .dnb-drawer__content { - padding: 0 calc(var(--drawer-spacing) / 1.333333); } } - @media screen and (max-width: 40em) { - .dnb-drawer--spacing .dnb-drawer__content { - padding: 0 calc(var(--drawer-spacing) / 2); } } - .dnb-drawer__align--center .dnb-drawer__content { - align-items: center; - text-align: center; } - .dnb-drawer__align--right .dnb-drawer__content { - align-items: flex-end; - text-align: right; } - .dnb-drawer--top, .dnb-drawer--bottom { - max-width: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +@media screen and (max-width: 40em) { + .dnb-drawer { width: 100vw; - height: 40vh; } - @media screen and (max-height: 40em) { - .dnb-drawer--top, .dnb-drawer--bottom { - height: 100vw; - min-height: auto; - max-height: auto; } } - .dnb-drawer--fullscreen { + min-width: auto; + max-width: auto; + } +} +@media screen and (max-width: 40em) { + .dnb-drawer--auto-fullscreen { width: 100%; height: 100vh; max-width: 100%; max-height: 100vh; border-radius: 0; - box-shadow: none; } - html:not([data-visual-test]) .dnb-drawer { - opacity: 0.1; - animation: show-drawer var(--modal-animation-duration) ease-out forwards; } - html:not([data-visual-test]) .dnb-drawer--left { - transform: translate3d(-20rem, 0, 0); } - html:not([data-visual-test]) .dnb-drawer--right { - transform: translate3d(20rem, 0, 0); } - html:not([data-visual-test]) .dnb-drawer--top { - transform: translate3d(0, -20rem, 0); } - html:not([data-visual-test]) .dnb-drawer--bottom { - transform: translate3d(0, 20rem, 0); } - html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--left { - animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards; } - html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--right { - animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards; } - html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--top { - animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards; } - html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom { - animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards; } - .dnb-drawer--no-animation { - animation-duration: 0ms !important; } - @media screen and (max-width: 40em) { - .dnb-drawer--no-animation-on-mobile { - animation-duration: 0ms !important; } } - .dnb-drawer__root { - align-items: flex-start; - justify-content: flex-start; } - @media screen and (max-width: 60em) { - .dnb-drawer__title { - font-size: var(--font-size-large) !important; - line-height: var(--line-height-medium) !important; } } - .dnb-drawer__title ~ .dnb-drawer__content { - padding-top: calc(var(--drawer-spacing) / 1.333333); } - .dnb-drawer .dnb-drawer__header [class*='dnb-h--'], - .dnb-drawer .dnb-drawer__header .dnb-drawer__title { - padding: 0; } - .dnb-drawer .dnb-drawer__header [class*='dnb-h--']:not([class*='__top']), - .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*='__top']) { - margin-top: 0; } - .dnb-drawer .dnb-drawer__header [class*='dnb-h--']:not([class*='__bottom']), - .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*='__bottom']) { - margin-bottom: 0; } - .dnb-drawer .dnb-drawer__header::after { - top: -500%; - height: 600%; } + box-shadow: none; + } +} +.dnb-drawer__inner { + position: relative; + display: flex; + flex-direction: column; + z-index: 10; + /** + NB: Do not use "overflow-x: hidden;" in here, + (overflowing one direction, will influence the other – we can't just have one at a time) + To make the Drawer scroll, we use .dnb-scroll-view + */ + width: 100%; + height: calc(100% - var(--header-height, 0)); + /** Sets the color on scroll overflow (at the bottom) */ + background-color: var(--modal-background-color, transparent); +} +.dnb-drawer__align--centered .dnb-drawer__inner { + align-items: center; + justify-content: center; +} +.dnb-drawer__content { + position: relative; + z-index: 1; +} +.dnb-drawer--spacing .dnb-drawer__content { + padding: 0 var(--drawer-spacing); +} +@media screen and (min-width: 80em) { + .dnb-drawer--spacing .dnb-drawer__content { + padding: 0 calc(var(--drawer-spacing) * 1.75); + } +} +@media screen and (max-width: 60em) { + .dnb-drawer--spacing .dnb-drawer__content { + padding: 0 calc(var(--drawer-spacing) / 1.333333); + } +} +@media screen and (max-width: 40em) { + .dnb-drawer--spacing .dnb-drawer__content { + padding: 0 calc(var(--drawer-spacing) / 2); + } +} +.dnb-drawer__align--center .dnb-drawer__content { + align-items: center; + text-align: center; +} +.dnb-drawer__align--right .dnb-drawer__content { + align-items: flex-end; + text-align: right; +} +.dnb-drawer--top, .dnb-drawer--bottom { + max-width: 100%; + width: 100vw; + height: 40vh; +} +@media screen and (max-height: 40em) { + .dnb-drawer--top, .dnb-drawer--bottom { + height: 100vw; + min-height: auto; + max-height: auto; + } +} +.dnb-drawer--fullscreen { + width: 100%; + height: 100vh; + max-width: 100%; + max-height: 100vh; + border-radius: 0; + box-shadow: none; +} +html:not([data-visual-test]) .dnb-drawer { + opacity: 0.1; + animation: show-drawer var(--modal-animation-duration) ease-out forwards; +} +html:not([data-visual-test]) .dnb-drawer--left { + transform: translate3d(-20rem, 0, 0); +} +html:not([data-visual-test]) .dnb-drawer--right { + transform: translate3d(20rem, 0, 0); +} +html:not([data-visual-test]) .dnb-drawer--top { + transform: translate3d(0, -20rem, 0); +} +html:not([data-visual-test]) .dnb-drawer--bottom { + transform: translate3d(0, 20rem, 0); +} +html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--left { + animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards; +} +html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--right { + animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards; +} +html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--top { + animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards; +} +html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom { + animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards; +} +.dnb-drawer--no-animation { + animation-duration: 0ms !important; +} +@media screen and (max-width: 40em) { + .dnb-drawer--no-animation-on-mobile { + animation-duration: 0ms !important; + } +} +.dnb-drawer__root { + align-items: flex-start; + justify-content: flex-start; +} +@media screen and (max-width: 60em) { + .dnb-drawer__title { + font-size: var(--font-size-large) !important; + line-height: var(--line-height-medium) !important; + } +} +.dnb-drawer__title ~ .dnb-drawer__content { + padding-top: calc(var(--drawer-spacing) / 1.333333); +} +.dnb-drawer .dnb-drawer__header [class*=dnb-h--], .dnb-drawer .dnb-drawer__header .dnb-drawer__title { + padding: 0; +} +.dnb-drawer .dnb-drawer__header [class*=dnb-h--]:not([class*=__top]), .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*=__top]) { + margin-top: 0; +} +.dnb-drawer .dnb-drawer__header [class*=dnb-h--]:not([class*=__bottom]), .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*=__bottom]) { + margin-bottom: 0; +} +.dnb-drawer .dnb-drawer__header::after { + top: -500%; + height: 600%; +} +.dnb-drawer--spacing .dnb-drawer__header { + padding: 0 var(--drawer-spacing); +} +@media screen and (min-width: 80em) { + .dnb-drawer--spacing .dnb-drawer__header { + padding: 0 calc(var(--drawer-spacing) * 1.75); + } +} +@media screen and (max-width: 60em) { .dnb-drawer--spacing .dnb-drawer__header { - padding: 0 var(--drawer-spacing); } - @media screen and (min-width: 80em) { - .dnb-drawer--spacing .dnb-drawer__header { - padding: 0 calc(var(--drawer-spacing) * 1.75); } } - @media screen and (max-width: 60em) { - .dnb-drawer--spacing .dnb-drawer__header { - padding: 0 calc(var(--drawer-spacing) / 1.333333); } } - @media screen and (max-width: 40em) { - .dnb-drawer--spacing .dnb-drawer__header { - padding: 0 calc(var(--drawer-spacing) / 2); } } - .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs { - margin-top: var(--drawer-spacing); } + padding: 0 calc(var(--drawer-spacing) / 1.333333); + } +} +@media screen and (max-width: 40em) { + .dnb-drawer--spacing .dnb-drawer__header { + padding: 0 calc(var(--drawer-spacing) / 2); + } +} +.dnb-drawer--spacing .dnb-drawer__header .dnb-tabs { + margin-top: var(--drawer-spacing); +} +.dnb-drawer__body { + padding-bottom: calc(var(--drawer-spacing) * 2); + margin-bottom: calc(var(--drawer-spacing-minus) * 2); +} +@supports (-webkit-touch-callout: none) { .dnb-drawer__body { - padding-bottom: calc(var(--drawer-spacing) * 2); - margin-bottom: calc(var(--drawer-spacing-minus) * 2); } - @supports (-webkit-touch-callout: none) { - .dnb-drawer__body { - padding-bottom: calc(var(--drawer-spacing-minus) * 8); } } - .dnb-drawer__navigation.dnb-section { - display: flex; - flex-direction: row; - justify-content: space-between; } + padding-bottom: calc(var(--drawer-spacing-minus) * 8); + } +} +.dnb-drawer__navigation.dnb-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { + position: sticky; + top: 0; + left: 0; + z-index: 99; + margin: var(--drawer-spacing) 0; + padding: 0 var(--drawer-spacing); +} +@media screen and (min-width: 80em) { + .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { + padding: 0 calc(var(--drawer-spacing) * 1.75); + } +} +@media screen and (max-width: 60em) { .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { - position: sticky; - top: 0; - left: 0; - z-index: 99; - margin: var(--drawer-spacing) 0; - padding: 0 var(--drawer-spacing); } - @media screen and (min-width: 80em) { - .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { - padding: 0 calc(var(--drawer-spacing) * 1.75); } } - @media screen and (max-width: 60em) { - .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { - padding: 0 calc(var(--drawer-spacing) / 1.333333); } } - @media screen and (max-width: 40em) { - .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { - padding: 0 calc(var(--drawer-spacing) / 2); } } - .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky { - z-index: 2999; } - .dnb-drawer .dnb-drawer__navigation--sticky::before { - content: ''; - position: absolute; - z-index: -1; - left: 0; - right: 0; - bottom: 0; - height: 300%; - box-shadow: var(--shadow-default); } - .dnb-drawer .dnb-drawer__navigation:not(.dnb-drawer__navigation--sticky)::after { - color: transparent; } - @media screen and (max-width: 40em) { - .dnb-drawer--no-animation-on-mobile { - animation-delay: 0ms !important; - animation-duration: 0ms !important; } } + padding: 0 calc(var(--drawer-spacing) / 1.333333); + } +} +@media screen and (max-width: 40em) { + .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section { + padding: 0 calc(var(--drawer-spacing) / 2); + } +} +.dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky { + z-index: 2999; +} +.dnb-drawer .dnb-drawer__navigation--sticky::before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + bottom: 0; + height: 300%; + box-shadow: var(--shadow-default); +} +.dnb-drawer .dnb-drawer__navigation:not(.dnb-drawer__navigation--sticky)::after { + color: transparent; +} +@media screen and (max-width: 40em) { + .dnb-drawer--no-animation-on-mobile { + animation-delay: 0ms !important; + animation-duration: 0ms !important; + } +} [data-visual-test].hide-page-content #___gatsby { - opacity: 0; } -" + opacity: 0; +}" `; 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 f09acc61b87..7652bb3f051 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 @@ -1346,48 +1346,51 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = ` /* * Utilities */ -html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover[disabled] { - cursor: not-allowed; } - -html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled]) { - color: var(--color-emerald-green); } - +html:not([data-whatintent=touch]) .dnb-dropdown__trigger:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-dropdown__trigger:hover:not([disabled]) { + color: var(--color-emerald-green); +} .dnb-dropdown__trigger[disabled] { color: var(--color-black-55); - background-color: var(--color-black-3); } - .dnb-dropdown__trigger[disabled]:not(.dnb-button--tertiary) { - --border-color: var(--color-black-55); - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + background-color: var(--color-black-3); +} +.dnb-dropdown__trigger[disabled]:not(.dnb-button--tertiary) { + --border-color: var(--color-black-55); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) { - color: var(--color-fire-red); - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon { - color: var(--color-fire-red); } - .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] { - cursor: not-allowed; } - .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) { - color: var(--color-fire-red); - background-color: var(--color-fire-red-8); } - -.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, -.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon { - color: var(--color-fire-red); } - + border-color: transparent; +} +html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) { + color: var(--color-fire-red); + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon { + color: var(--color-fire-red); +} +.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] { + cursor: not-allowed; +} +.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) { + color: var(--color-fire-red); + background-color: var(--color-fire-red-8); +} +.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon { + color: var(--color-fire-red); +} .dnb-dropdown > .dnb-form-status { - transform: translateY(-0.4375rem); } -" + transform: translateY(-0.4375rem); +}" `; exports[`Dropdown scss have to match snapshot 1`] = ` @@ -1402,10 +1405,16 @@ exports[`Dropdown scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1413,67 +1422,170 @@ exports[`Dropdown scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1484,156 +1596,205 @@ exports[`Dropdown scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1651,7 +1812,8 @@ exports[`Dropdown scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1669,164 +1831,214 @@ exports[`Dropdown scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -1837,25 +2049,124 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Dropdown component * */ +/* + * Utilities + */ :root { --dropdown-width: 16rem; --dropdown-height: 2rem; @@ -1865,194 +2176,244 @@ legend.dnb-form-label { --dropdown-padding-horizontal: 1rem; --dropdown-focus-border-width: 0.125rem; --dropdown-text-padding: 0.5rem; - --dropdown-border-radius: 0.25rem; } + --dropdown-border-radius: 0.25rem; +} .dnb-dropdown { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--dropdown-height); } - .dnb-dropdown__inner { - display: inline-flex; - flex-direction: column; - margin: 0; - padding: 0; - width: auto; - color: inherit; } - .dnb-dropdown__shell { - position: relative; - width: var(--dropdown-width); - height: var(--dropdown-height); - margin: 0; - padding: 0; - color: inherit; } - .dnb-dropdown__row { - display: inline-flex; } - .dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); } - .dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); } - .dnb-dropdown__icon { - position: relative; - order: 2; - display: inline-flex; - justify-content: center; - pointer-events: none; } - .dnb-dropdown__trigger { - position: relative; - z-index: 1; - user-select: none; - -webkit-user-select: none; - width: 100%; } - .dnb-dropdown__trigger.dnb-button { - padding: 0 1rem; - border-radius: var(--dropdown-border-radius); } - .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button { - padding: 0; - border-radius: 50%; } - .dnb-dropdown__text { - order: 1; - position: relative; - z-index: 4; - display: inline-block; - width: 100%; - overflow: hidden; - color: inherit; - text-align: left; - text-overflow: ellipsis; - line-height: inherit; - font-size: var(--font-size-basis); } - .dnb-dropdown__text__inner { - display: inherit; - overflow: hidden; - white-space: nowrap; - text-overflow: inherit; } - .dnb-dropdown--icon-position-left .dnb-dropdown__text { - order: 2; - padding-right: 0; - padding-left: var(--dropdown-text-padding); } - .dnb-dropdown--icon-position-left .dnb-dropdown__icon { - order: 1; } - .dnb-dropdown--icon-position-right .dnb-dropdown__text { - padding-right: var(--dropdown-text-padding); } - .dnb-dropdown--independent-width .dnb-dropdown__shell { - width: auto; } - @media screen and (max-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button { - padding-left: 0.5rem; - padding-right: 0.5rem; - border-radius: 50%; } } - @media screen and (min-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { - padding: 0 0.5rem; } } - @media screen and (max-width: 40em) { - .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { - width: 0; - padding: 0; } } - .dnb-dropdown--icon-position-left .dnb-button--tertiary -~ .dnb-drawer-list__root--portal { - left: -0.5rem; } - .dnb-dropdown--icon-position-right .dnb-button--tertiary -~ .dnb-drawer-list__root--portal { - left: 0.5rem; } - .dnb-dropdown .dnb-button--tertiary.dnb-button--active { - box-shadow: none; } - .dnb-dropdown .dnb-button--tertiary .dnb-button__text { - margin: 0 0.5rem; } - .dnb-dropdown .dnb-button--tertiary .dnb-button__text::after { - bottom: 0; } - .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, - .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text { - padding: 0; } - .dnb-dropdown .dnb-button--tertiary:focus::before { - left: 0 !important; - right: 0 !important; } - .dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--is-popup .dnb-dropdown__trigger { + line-height: var(--dropdown-height); +} +.dnb-dropdown__inner { + display: inline-flex; + flex-direction: column; + margin: 0; + padding: 0; + width: auto; + color: inherit; +} +.dnb-dropdown__shell { + position: relative; + width: var(--dropdown-width); + height: var(--dropdown-height); + margin: 0; + padding: 0; + color: inherit; +} +.dnb-dropdown__row { + display: inline-flex; +} +.dnb-dropdown--large .dnb-drawer-list__triangle { + margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); +} +.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { + margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); +} +.dnb-dropdown__icon { + position: relative; + order: 2; + display: inline-flex; + justify-content: center; + pointer-events: none; +} +.dnb-dropdown__trigger { + position: relative; + z-index: 1; + user-select: none; + -webkit-user-select: none; + width: 100%; +} +.dnb-dropdown__trigger.dnb-button { + padding: 0 1rem; + border-radius: var(--dropdown-border-radius); +} +.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button { + padding: 0; + border-radius: 50%; +} +.dnb-dropdown__text { + order: 1; + position: relative; + z-index: 4; + display: inline-block; + width: 100%; + overflow: hidden; + color: inherit; + text-align: left; + text-overflow: ellipsis; + line-height: inherit; + font-size: var(--font-size-basis); +} +.dnb-dropdown__text__inner { + display: inherit; + overflow: hidden; + white-space: nowrap; + text-overflow: inherit; +} +.dnb-dropdown--icon-position-left .dnb-dropdown__text { + order: 2; + padding-right: 0; + padding-left: var(--dropdown-text-padding); +} +.dnb-dropdown--icon-position-left .dnb-dropdown__icon { + order: 1; +} +.dnb-dropdown--icon-position-right .dnb-dropdown__text { + padding-right: var(--dropdown-text-padding); +} +.dnb-dropdown--independent-width .dnb-dropdown__shell { + width: auto; +} +@media screen and (max-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button { + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 50%; + } +} +@media screen and (min-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { + padding: 0 0.5rem; + } +} +@media screen and (max-width: 40em) { + .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text { + width: 0; padding: 0; - width: var(--dropdown-height); - height: var(--dropdown-height); } - .dnb-dropdown--is-popup .dnb-dropdown__icon { - width: 100%; } - .dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options { - min-height: 1rem; } - .dnb-dropdown--is-popup .dnb-drawer-list__root { - width: var(--dropdown-width); } - .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--small); } - .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--medium); } - .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell, - .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger { - width: var(--dropdown-height--large); } - .dnb-dropdown--small .dnb-dropdown__shell, - .dnb-dropdown--small .dnb-dropdown__trigger { - height: var(--dropdown-height--small); } - .dnb-dropdown--small, - .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--small); } - .dnb-dropdown--medium .dnb-dropdown__shell, - .dnb-dropdown--medium .dnb-dropdown__trigger { - height: var(--dropdown-height--medium); } - .dnb-dropdown--medium, - .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--medium); } - .dnb-dropdown--large .dnb-dropdown__shell, - .dnb-dropdown--large .dnb-dropdown__trigger { - height: var(--dropdown-height--large); } - .dnb-dropdown--large, - .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button { - line-height: var(--dropdown-height--large); } - .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text { - line-height: var(--line-height-basis); } + } +} +.dnb-dropdown--icon-position-left .dnb-button--tertiary ~ .dnb-drawer-list__root--portal { + left: -0.5rem; +} +.dnb-dropdown--icon-position-right .dnb-button--tertiary ~ .dnb-drawer-list__root--portal { + left: 0.5rem; +} +.dnb-dropdown .dnb-button--tertiary.dnb-button--active { + box-shadow: none; +} +.dnb-dropdown .dnb-button--tertiary .dnb-button__text { + margin: 0 0.5rem; +} +.dnb-dropdown .dnb-button--tertiary .dnb-button__text::after { + bottom: 0; +} +.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text { + padding: 0; +} +.dnb-dropdown .dnb-button--tertiary:focus::before { + left: 0 !important; + right: 0 !important; +} +.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--is-popup .dnb-dropdown__trigger { + padding: 0; + width: var(--dropdown-height); + height: var(--dropdown-height); +} +.dnb-dropdown--is-popup .dnb-dropdown__icon { + width: 100%; +} +.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options { + min-height: 1rem; +} +.dnb-dropdown--is-popup .dnb-drawer-list__root { + width: var(--dropdown-width); +} +.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--small); +} +.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--medium); +} +.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell, .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger { + width: var(--dropdown-height--large); +} +.dnb-dropdown--small .dnb-dropdown__shell, .dnb-dropdown--small .dnb-dropdown__trigger { + height: var(--dropdown-height--small); +} +.dnb-dropdown--small, .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--small); +} +.dnb-dropdown--medium .dnb-dropdown__shell, .dnb-dropdown--medium .dnb-dropdown__trigger { + height: var(--dropdown-height--medium); +} +.dnb-dropdown--medium, .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--medium); +} +.dnb-dropdown--large .dnb-dropdown__shell, .dnb-dropdown--large .dnb-dropdown__trigger { + height: var(--dropdown-height--large); +} +.dnb-dropdown--large, .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button { + line-height: var(--dropdown-height--large); +} +.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text { + line-height: var(--line-height-basis); +} +.dnb-dropdown > .dnb-form-label { + margin-right: 1rem; + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-dropdown { + flex-wrap: wrap; + } .dnb-dropdown > .dnb-form-label { - margin-right: 1rem; - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-dropdown { - flex-wrap: wrap; } - .dnb-dropdown > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-dropdown--stretch { - display: flex; - flex-grow: 1; } - .dnb-dropdown--stretch .dnb-dropdown__inner { - flex-grow: 1; } - .dnb-dropdown--stretch .dnb-dropdown__row, .dnb-dropdown--stretch .dnb-dropdown__inner, .dnb-dropdown--stretch .dnb-dropdown__shell { - width: 100%; } - .dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner { - width: auto; } - .dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-dropdown--stretch { - width: 100%; } - label + .dnb-dropdown[class*='__form-status'] { - vertical-align: top; } - label + .dnb-dropdown[class*='__form-status'] .dnb-dropdown__shell { - top: -0.375rem; } - .dnb-dropdown__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-dropdown--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-dropdown--stretch { + display: flex; + flex-grow: 1; +} +.dnb-dropdown--stretch .dnb-dropdown__inner { + flex-grow: 1; +} +.dnb-dropdown--stretch .dnb-dropdown__row, .dnb-dropdown--stretch .dnb-dropdown__inner, .dnb-dropdown--stretch .dnb-dropdown__shell { + width: 100%; +} +.dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner { + width: auto; +} +.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-dropdown--stretch { + width: 100%; +} +label + .dnb-dropdown[class*=__form-status] { + vertical-align: top; +} +label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell { + top: -0.375rem; +} +.dnb-dropdown__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-dropdown--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-dropdown { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-dropdown { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-dropdown > .dnb-form-label { - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-dropdown__helper { - display: none; } } -" + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-dropdown > .dnb-form-label { + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-dropdown__helper { + display: none; + } +}" `; 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 0723af61607..f9e0c282224 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 @@ -36,10 +36,11 @@ exports[`FormLabel scss have to match default theme snapshot 1`] = ` * */ .dnb-form-label { - color: var(--color-black-80); } - .dnb-form-label[for]:not([disabled]):hover { - color: var(--color-sea-green); } -" + color: var(--color-black-80); +} +.dnb-form-label[for]:not([disabled]):hover { + color: var(--color-sea-green); +}" `; exports[`FormLabel scss have to match snapshot 1`] = ` @@ -54,6 +55,9 @@ exports[`FormLabel scss have to match snapshot 1`] = ` * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -64,19 +68,23 @@ exports[`FormLabel scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } -" + display: inline-block; +}" `; diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap index e30fe2e3789..e091dc622d2 100644 --- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap @@ -95,11 +95,13 @@ exports[`FormRow scss have to match default theme snapshot 1`] = ` */ .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label { width: 30vw; - max-width: 20rem; } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label { - width: auto; } } -" + max-width: 20rem; +} +@media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label { + width: auto; + } +}" `; exports[`FormRow scss have to match snapshot 1`] = ` @@ -114,100 +116,142 @@ exports[`FormRow scss have to match snapshot 1`] = ` * FormRow component * */ +/* + * Utilities + */ :root { --form-row-column1-start: auto; --form-row-column2-start: 1fr; --form-row-row1-start: auto; --form-row-row2-start: auto; - --form-bounding-height: 0.25rem; } + --form-bounding-height: 0.25rem; +} .dnb-form-row { - align-items: baseline; } - .dnb-form-row, .dnb-form-row.dnb-section { - display: flex; } - .dnb-form-row__content { - display: inline-flex; - flex: 1; - width: 100%; } + align-items: baseline; +} +.dnb-form-row, .dnb-form-row.dnb-section { + display: flex; +} +.dnb-form-row__content { + display: inline-flex; + flex: 1; + width: 100%; +} +.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content { + align-items: baseline; +} +.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label { + white-space: nowrap; +} +.dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap { + display: block; +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] { + display: grid; + grid-template-columns: [column1-start] var(--form-row-column1-start) [column1-end column2-start] var(--form-row-column2-start) [column2-end]; + grid-template-rows: [row1-start] var(--form-row-row1-start) [row1-end row2-start] var(--form-row-row2-start) [row2-end]; +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content { + grid-column: column2-start/column2-end; + grid-row: row2-start/row2-end; +} +@media screen and (min-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--default { + margin-top: -1.5rem; + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--x-small { + margin-top: calc(-0.5rem + var(--form-bounding-height)); + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--small { + margin-top: calc(-1rem + var(--form-bounding-height)); + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--medium { + margin-top: calc(-1.5rem + var(--form-bounding-height)); + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--large { + margin-top: calc(-2rem + var(--form-bounding-height)); + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--m-large { + margin-top: -1.875rem; + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--x-large { + margin-top: calc(-3rem + var(--form-bounding-height)); + } + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--xx-large { + margin-top: calc(-3.5rem + var(--form-bounding-height)); + } +} +@media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content { + margin-top: 0.5rem !important; + } +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-label { + grid-column: column1-start/column1-end; + grid-row: row1-start/row1-end; + margin-right: 1rem; +} +@media screen and (min-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-label { + text-align: right; + } +} +@media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] { + display: block; + } +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-form-row__label-dummy { + margin-top: 0; +} +@media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical) { + flex-direction: column; + align-items: flex-start; + } + .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label { + margin-bottom: 0.5rem; + } .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content { - align-items: baseline; } - .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label { - white-space: nowrap; } - .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap { - display: block; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { - display: grid; - grid-template-columns: [column1-start] var(--form-row-column1-start) [column1-end column2-start] var(--form-row-column2-start) [column2-end]; - grid-template-rows: [row1-start] var(--form-row-row1-start) [row1-end row2-start] var(--form-row-row2-start) [row2-end]; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { - grid-column: column2-start / column2-end; - grid-row: row2-start / row2-end; } - @media screen and (min-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--default { - margin-top: -1.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-small { - margin-top: calc(-0.5rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--small { - margin-top: calc(-1rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--medium { - margin-top: calc(-1.5rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--large { - margin-top: calc(-2rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--m-large { - margin-top: calc(-2.5rem + 0.625rem); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-large { - margin-top: calc(-3rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--xx-large { - margin-top: calc(-3.5rem + var(--form-bounding-height)); } } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { - margin-top: 0.5rem !important; } } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { - grid-column: column1-start / column1-end; - grid-row: row1-start / row1-end; - margin-right: 1rem; } - @media screen and (min-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { - text-align: right; } } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { - display: block; } } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] .dnb-form-row__label-dummy { - margin-top: 0; } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical) { - flex-direction: column; - align-items: flex-start; } - .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label { - margin-bottom: 0.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content { - flex-direction: column; } - .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content > .dnb-form-label { - margin-top: 1rem; } } - @media screen and (min-width: 40em) { - .dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content { - align-items: center; } } - .dnb-form-row--vertical > .dnb-form-row__label { - margin-bottom: 0.5rem; } - .dnb-form-row--vertical > .dnb-form-row__content, .dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested) { - flex-direction: column; } - .dnb-form-row--vertical-label { - flex-direction: column; } - .dnb-form-row > .dnb-form-status { - margin: 0.5rem 0; } - .dnb-form-row > .dnb-form-row__label--vertical { - display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content { - grid-column: column1-start / column1-end; } - .dnb-form-row__label-dummy { - margin: 0; } - .dnb-form-row__fieldset, - .dnb-core-style .dnb-form-row__fieldset { - margin: 0; - padding: 0; - border: none; - width: 100%; } -" + } + .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content > .dnb-form-label { + margin-top: 1rem; + } +} +@media screen and (min-width: 40em) { + .dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content { + align-items: center; + } +} +.dnb-form-row--vertical > .dnb-form-row__label { + margin-bottom: 0.5rem; +} +.dnb-form-row--vertical > .dnb-form-row__content, .dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested) { + flex-direction: column; +} +.dnb-form-row--vertical-label { + flex-direction: column; +} +.dnb-form-row > .dnb-form-status { + margin: 0.5rem 0; +} +.dnb-form-row > .dnb-form-row__label--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content { + grid-column: column1-start/column1-end; +} +.dnb-form-row__label-dummy { + margin: 0; +} +.dnb-form-row__fieldset, .dnb-core-style .dnb-form-row__fieldset { + margin: 0; + padding: 0; + border: none; + width: 100%; +}" `; diff --git a/packages/dnb-eufemia/src/components/form-set/__tests__/__snapshots__/FormSet.test.js.snap b/packages/dnb-eufemia/src/components/form-set/__tests__/__snapshots__/FormSet.test.js.snap index 9bc0d143475..cd08d43af13 100644 --- a/packages/dnb-eufemia/src/components/form-set/__tests__/__snapshots__/FormSet.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-set/__tests__/__snapshots__/FormSet.test.js.snap @@ -23,8 +23,7 @@ exports[`FormSet scss have to match default theme snapshot 1`] = ` "/* * FormSet theme * - */ -" + */" `; exports[`FormSet scss have to match snapshot 1`] = ` @@ -38,6 +37,5 @@ exports[`FormSet scss have to match snapshot 1`] = ` /* * FormSet component * - */ -" + */" `; diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap index 5a124bda906..16eb622414f 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap @@ -171,65 +171,66 @@ exports[`FormStatus scss have to match default theme snapshot 1`] = ` */ .dnb-form-status__shell { color: var(--color-black-80); - font-size: var(--font-size-small); } - + font-size: var(--font-size-small); +} .dnb-form-status--error .dnb-form-status__shell { - background-color: var(--color-fire-red-8); } - .dnb-form-status--error .dnb-form-status__shell > .dnb-icon { - color: var(--color-fire-red); - border: none; } - + background-color: var(--color-fire-red-8); +} +.dnb-form-status--error .dnb-form-status__shell > .dnb-icon { + color: var(--color-fire-red); + border: none; +} .dnb-form-status--warn .dnb-form-status__shell { - background-color: var(--color-sand-yellow); } - + background-color: var(--color-sand-yellow); +} .dnb-form-status--info .dnb-form-status__shell { - background-color: var(--color-pistachio); } - + background-color: var(--color-pistachio); +} .dnb-form-status--marketing .dnb-form-status__shell { - background-color: var(--color-lavender); } - + background-color: var(--color-lavender); +} .dnb-form-status:not(.dnb-form-status--attention-focus).dnb-form-status__text { - color: var(--color-black-80); } - + color: var(--color-black-80); +} .dnb-form-status__variant--outlined.dnb-form-status--error .dnb-form-status__shell { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-form-status__variant--outlined.dnb-form-status--warn .dnb-form-status__shell { --border-color: var(--color-accent-yellow); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-form-status__variant--outlined.dnb-form-status--info .dnb-form-status__shell { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell { --border-color: var(--color-black-55); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - -.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell, -.dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell { - animation: attention-focus 2s ease-in-out 1 200ms; } - -.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell > .dnb-icon, -.dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell > .dnb-icon { - animation: attention-focus 2s ease-in-out 1 200ms; } + border-color: transparent; +} +.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell, .dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell { + animation: attention-focus 2s ease-in-out 1 200ms; +} +.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell > .dnb-icon, .dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell > .dnb-icon { + animation: attention-focus 2s ease-in-out 1 200ms; +} @keyframes attention-focus { - 0%, - 100% { + 0%, 100% { color: var(--color-fire-red); background-color: var(--color-fire-red-8); - border-color: var(--color-fire-red); } + border-color: var(--color-fire-red); + } 35% { color: var(--color-white); background-color: var(--color-fire-red); - border-color: var(--color-fire-red); } } -" + border-color: var(--color-fire-red); + } +}" `; exports[`FormStatus scss have to match snapshot 1`] = ` @@ -244,64 +245,83 @@ exports[`FormStatus scss have to match snapshot 1`] = ` * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } -" + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +}" `; 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 b2451b15100..6d347365435 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 @@ -4,8 +4,7 @@ exports[`GlobalError scss have to match default theme snapshot 1`] = ` "/* * GlobalError theme * - */ -" + */" `; exports[`GlobalError scss have to match snapshot 1`] = ` @@ -20,14 +19,23 @@ exports[`GlobalError scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -35,63 +43,81 @@ exports[`GlobalError scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -102,156 +128,205 @@ exports[`GlobalError scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -269,7 +344,8 @@ exports[`GlobalError scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -287,209 +363,272 @@ exports[`GlobalError scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * GlobalError component * */ +/* + * Utilities + */ .dnb-global-error { display: flex; flex-direction: column; align-items: center; width: 100%; - height: 100%; } + height: 100%; +} +.dnb-global-error__inner { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + /* for large screens */ + width: 100%; + max-width: var(--layout-large); + padding: var(--spacing-large); + text-align: center; +} +@media screen and (max-width: 40em) { .dnb-global-error__inner { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - /* for large screens */ - width: 100%; - max-width: var(--layout-large); - padding: var(--spacing-large); - text-align: center; } - @media screen and (max-width: 40em) { - .dnb-global-error__inner { - padding: 0 var(--spacing-x-small); } } - .dnb-global-error__inner__content { - max-width: 37rem; } + padding: 0 var(--spacing-x-small); + } +} +.dnb-global-error__inner__content { + max-width: 37rem; +} +.dnb-global-error__back.dnb-button--tertiary { + position: absolute; + z-index: 1; + top: var(--spacing-large); + left: var(--spacing-large); +} +@media screen and (max-width: 90em) { .dnb-global-error__back.dnb-button--tertiary { - position: absolute; - z-index: 1; - top: var(--spacing-large); - left: var(--spacing-large); } - @media screen and (max-width: 90em) { - .dnb-global-error__back.dnb-button--tertiary { - left: var(--spacing-x-small); } } + left: var(--spacing-x-small); + } +} +.dnb-global-error__gfx { + margin-top: 9rem; + shape-rendering: geometricPrecision; +} +@media screen and (max-width: 90em) { + .dnb-global-error__gfx { + margin-top: 8vw; + margin-top: calc(4vw + 4vh); + } +} +@media screen and (max-width: 40em) { + .dnb-global-error__gfx { + margin-top: 0; + transform: scale(0.8); + } +} +@supports (color: var(--data-width)) { .dnb-global-error__gfx { - margin-top: 9rem; - shape-rendering: geometricPrecision; } - @media screen and (max-width: 90em) { - .dnb-global-error__gfx { - margin-top: 8vw; - margin-top: calc(4vw + 4vh); } } - @media screen and (max-width: 40em) { - .dnb-global-error__gfx { - margin-top: 0; - transform: scale(0.8); } } - @supports (color: var(--data-width)) { - .dnb-global-error__gfx { - width: calc(var(--data-width, 100%) / 16 * 1em); - height: calc(var(--data-height, 100%) / 16 * 1em); } } - @media screen and (max-width: 40em) { - .dnb-global-error .dnb-h--xx-large.dnb-space__top--xx-large.dnb-space__top--x-small { - margin-top: 0; - font-size: var(--font-size-x-large); } } -" + width: calc(var(--data-width, 100%) / 16 * 1em); + height: calc(var(--data-height, 100%) / 16 * 1em); + } +} +@media screen and (max-width: 40em) { + .dnb-global-error .dnb-h--xx-large.dnb-space__top--xx-large.dnb-space__top--x-small { + margin-top: 0; + font-size: var(--font-size-x-large); + } +}" `; exports[`GlobalError snapshot have to match component snapshot 1`] = ` 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 23afa21f492..d87bd12a069 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,23 +9,23 @@ 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; } - + font-size: 1rem; +} .dnb-global-status__message__content { - color: var(--color-black-80); } - + color: var(--color-black-80); +} .dnb-global-status__message.dnb-section--white ::selection { - background-color: var(--color-mint-green); } - + background-color: var(--color-mint-green); +} .dnb-global-status__content .dnb-hr { - color: var(--color-fire-red); } - + color: var(--color-fire-red); +} .dnb-global-status--info .dnb-global-status__content .dnb-hr { - color: var(--color-sea-green); } -" + color: var(--color-sea-green); +}" `; exports[`GlobalStatus scss have to match snapshot 1`] = ` @@ -40,14 +40,23 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -55,63 +64,81 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -122,156 +149,205 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -289,7 +365,8 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -307,303 +384,370 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Section component * */ +/* + * Utilities + */ .dnb-section { position: relative; - display: flow-root; } - .dnb-section::after { - content: ''; - position: absolute; - z-index: -15; - left: -100vw; - top: 0; - 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; } - .dnb-section .dnb-section::after { - z-index: -14; } - .dnb-section .dnb-section .dnb-section::after { - z-index: -13; } - .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -12; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -11; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -10; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -9; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -8; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -7; } - .dnb-section--spacing-x-small { - padding: var(--spacing-x-small) 0; } - .dnb-section--spacing-small { - padding: var(--spacing-small) 0; } - .dnb-section--spacing-medium { - padding: var(--spacing-medium) 0; } - .dnb-section--spacing-x-large { - padding: var(--spacing-x-large) 0; } - .dnb-section--spacing-xx-large { - padding: var(--spacing-xx-large) 0; } - .dnb-section--spacing, .dnb-section--spacing-large { - padding: var(--spacing-large) 0; } + display: flow-root; +} +.dnb-section::after { + content: ""; + position: absolute; + z-index: -15; + left: -100vw; + top: 0; + 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; +} +.dnb-section .dnb-section::after { + z-index: -14; +} +.dnb-section .dnb-section .dnb-section::after { + z-index: -13; +} +.dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -12; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -11; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -10; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -9; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -8; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -7; +} +.dnb-section--spacing-x-small { + padding: var(--spacing-x-small) 0; +} +.dnb-section--spacing-small { + padding: var(--spacing-small) 0; +} +.dnb-section--spacing-medium { + padding: var(--spacing-medium) 0; +} +.dnb-section--spacing-x-large { + padding: var(--spacing-x-large) 0; +} +.dnb-section--spacing-xx-large { + padding: var(--spacing-xx-large) 0; +} +.dnb-section--spacing, .dnb-section--spacing-large { + padding: var(--spacing-large) 0; +} /* * GlobalStatus component * */ +/* + * Utilities + */ :root { - --global-status-easing: var(--easing-default); } + --global-status-easing: var(--easing-default); +} .dnb-global-status.dnb-section { - display: block; } - + display: block; +} .dnb-global-status__wrapper { position: relative; - z-index: 1; } - + z-index: 1; +} .dnb-global-status__shell { width: 100%; opacity: 1; will-change: height; - transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing); } - + transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing); +} .dnb-global-status--hidden .dnb-global-status__shell { height: 0; - opacity: 0; } - -.dnb-global-status--no-animation .dnb-global-status__shell, -html[data-visual-test] .dnb-global-status__shell { - transition-duration: 1ms !important; } - + opacity: 0; +} +.dnb-global-status--no-animation .dnb-global-status__shell, html[data-visual-test] .dnb-global-status__shell { + transition-duration: 1ms !important; +} .dnb-global-status, .dnb-global-status--no-animation.dnb-global-status--visible { - display: flex; } - + display: flex; +} .dnb-global-status--no-animation.dnb-global-status--hidden { - display: none; } - + display: none; +} .dnb-global-status__title { position: relative; cursor: text; - min-height: 4.5rem; } - .dnb-global-status__title.dnb-p { - display: flex; - align-items: center; - padding-top: 1rem; - padding-bottom: 1rem; - padding-right: 5rem; - padding-left: 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']) { - margin: 0; } - + min-height: 4.5rem; +} +.dnb-global-status__title.dnb-p { + display: flex; + align-items: center; + padding-top: 1rem; + padding-bottom: 1rem; + padding-right: 5rem; + padding-left: 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]) { + margin: 0; +} .dnb-global-status__message { cursor: text; - z-index: 1; } - .dnb-global-status__message__content { - display: flex; - flex-direction: column; - padding: 0.5rem 0 2.5rem 2.5rem; } - .dnb-global-status__message__content .dnb-p, - .dnb-spacing .dnb-global-status__message__content .dnb-p, - .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*='dnb-space']) { - display: inline-block; - margin: 0; - padding: 0; } - + z-index: 1; +} +.dnb-global-status__message__content { + display: flex; + flex-direction: column; + padding: 0.5rem 0 2.5rem 2.5rem; +} +.dnb-global-status__message__content .dnb-p, .dnb-spacing .dnb-global-status__message__content .dnb-p, .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*=dnb-space]) { + display: inline-block; + margin: 0; + padding: 0; +} .dnb-global-status__icon { position: absolute; top: 0; left: 0; - margin-top: 1.5rem; } - + margin-top: 1.5rem; +} .dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary { position: absolute; z-index: 1; right: 1rem; - left: auto; } - + left: auto; +} .dnb-modal__content__inner .dnb-global-status__close-button { - right: 0; } - + right: 0; +} .dnb-global-status__content { - width: 100%; } - .dnb-global-status__content .dnb-ul, - .dnb-spacing .dnb-global-status__content .dnb-ul, - .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) { - margin: 0; - margin-top: 0.5rem; - padding-left: 1rem; } - .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, - .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, - .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) .dnb-anchor:last-of-type { - margin-left: 0.5rem; } - .dnb-global-status__content .dnb-hr, - .dnb-spacing .dnb-global-status__content .dnb-hr, - .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*='dnb-space']) { - margin: 0; } -" + width: 100%; +} +.dnb-global-status__content .dnb-ul, .dnb-spacing .dnb-global-status__content .dnb-ul, .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) { + margin: 0; + margin-top: 0.5rem; + padding-left: 1rem; +} +.dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) .dnb-anchor:last-of-type { + margin-left: 0.5rem; +} +.dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*=dnb-space]) { + margin: 0; +}" `; exports[`GlobalStatus snapshot have to match component snapshot 1`] = ` diff --git a/packages/dnb-eufemia/src/components/heading/__tests__/__snapshots__/Heading.test.js.snap b/packages/dnb-eufemia/src/components/heading/__tests__/__snapshots__/Heading.test.js.snap index 67f1cc1c6d0..7e51baf9658 100644 --- a/packages/dnb-eufemia/src/components/heading/__tests__/__snapshots__/Heading.test.js.snap +++ b/packages/dnb-eufemia/src/components/heading/__tests__/__snapshots__/Heading.test.js.snap @@ -451,15 +451,19 @@ exports[`Heading component have to match snapshot 1`] = ` * Heading Component * */ +/* + * Utilities + */ .dnb-heading__debug { color: var(--color-black-20); - font-weight: var(--font-weight-basis); } - .dnb-heading__debug .dnb-code { - color: var(--color-black); - font-size: 12px !important; } - + font-weight: var(--font-weight-basis); +} +.dnb-heading__debug .dnb-code { + color: var(--color-black); + font-size: 12px !important; +} .dnb-heading__context { display: block; - padding: 1rem 0 2rem; } -" + padding: 1rem 0 2rem; +}" `; 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 0058e6eb96d..c5abe4be1c2 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 @@ -4,8 +4,7 @@ exports[`HelpButton scss have to match default theme snapshot 1`] = ` "/* * Np theme is provided * - */ -" + */" `; exports[`HelpButton scss have to match snapshot 1`] = ` @@ -20,14 +19,23 @@ exports[`HelpButton scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -35,63 +43,81 @@ exports[`HelpButton scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -102,156 +128,205 @@ exports[`HelpButton scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -269,7 +344,8 @@ exports[`HelpButton scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -287,161 +363,204 @@ exports[`HelpButton scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * HelpButton component * * TODO: Set spacing in the theme file, as theme comes later in the stack * - */ -" + */" `; 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 21860c997bc..4d7b1c0249e 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 @@ -71,6 +71,9 @@ exports[`Icon scss have to match snapshot 1`] = ` * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -78,53 +81,64 @@ exports[`Icon scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } -" + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +}" `; 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 6fee5af6f3d..86ba1088c28 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 @@ -12,6 +12,9 @@ exports[`InfoCard InfoCard scss have to match snapshot 1`] = ` * InfoCard component * */ +/* + * Utilities + */ .dnb-info-card { display: flex; flex-direction: row; @@ -20,29 +23,36 @@ exports[`InfoCard InfoCard scss have to match snapshot 1`] = ` border-radius: 0.25rem; padding: 1rem; overflow: hidden; - box-shadow: var(--shadow-default); } - .dnb-info-card--centered { - flex-direction: column; - align-items: center; - text-align: center; } - .dnb-info-card--content { - flex-direction: column; - margin-top: 0.1875rem; } - .dnb-info-card--centered .dnb-info-card--content { - flex-direction: column; - margin-top: 0; } - .dnb-info-card--icon { - color: var(--color-emerald-green); } - .dnb-info-card--image { - height: 4rem; - width: 4rem; } - .dnb-info-card--buttons { - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .dnb-info-card--buttons-centered { - flex-direction: column; - align-items: center; - text-align: center; } -" + box-shadow: var(--shadow-default); +} +.dnb-info-card--centered { + flex-direction: column; + align-items: center; + text-align: center; +} +.dnb-info-card--content { + flex-direction: column; + margin-top: 0.1875rem; +} +.dnb-info-card--centered .dnb-info-card--content { + flex-direction: column; + margin-top: 0; +} +.dnb-info-card--icon { + color: var(--color-emerald-green); +} +.dnb-info-card--image { + height: 4rem; + width: 4rem; +} +.dnb-info-card--buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.dnb-info-card--buttons-centered { + flex-direction: column; + align-items: center; + text-align: center; +}" `; 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 60578a94305..b06b36182f8 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 @@ -251,18 +251,30 @@ exports[`InputMasked scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -270,63 +282,81 @@ exports[`InputMasked scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -337,156 +367,205 @@ exports[`InputMasked scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -504,7 +583,8 @@ exports[`InputMasked scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -522,164 +602,421 @@ exports[`InputMasked scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -690,25 +1027,124 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Input component * */ +/* + * Utilities + */ :root { --input-font-size: var(--font-size-basis); --input-font-size--small: var(--font-size-basis); @@ -723,276 +1159,338 @@ legend.dnb-form-label { --input-height--medium: 2.5rem; --input-height--large: 3rem; --input-border-width: 0.0625rem; - --input-border-radius: 0.25rem; } + --input-border-radius: 0.25rem; +} .dnb-input { display: inline-flex; align-items: center; font-size: var(--input-font-small); line-height: var(--input-height); - text-align: left; } - .dnb-input__inner { - display: inline-flex; - flex-direction: column; - width: auto; } - .dnb-input__shell { - position: relative; - display: flex; - align-items: center; - border: var(--input-border-width) solid var(--color-sea-green); } - .dnb-input__input { - border: none; - outline: none; - word-break: normal; - position: relative; - z-index: 2; } - .dnb-input__input[disabled] { - user-select: none; - -webkit-user-select: none; - opacity: 1; } - .dnb-input__shell, .dnb-input__input { - height: var(--input-height); - border-radius: var(--input-border-radius); } - .dnb-input__placeholder, .dnb-input__input { - width: 100%; - padding-left: var(--input-padding); - padding-right: var(--input-padding); } - .dnb-input__placeholder, .dnb-input__input, - .dnb-input input.dnb-input__input { - padding-top: 0; - padding-bottom: 0; - color: inherit; - background-color: transparent; - font-size: var(--input-font-size); - line-height: inherit; } - .dnb-input__placeholder { - pointer-events: none; - position: absolute; - z-index: 1; - top: 0; - left: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - .dnb-input input.dnb-input__input[type='file'] { - line-height: calc(var(--input-height) - 2px); } - .dnb-input__input::-webkit-search-cancel-button { - display: none; } - .dnb-input__input::-ms-clear { - display: none; } - .dnb-input ::-webkit-file-upload-button { - cursor: pointer; - outline: none; - color: var(--color-sea-green); } - .dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { - color: var(--color-emerald-green); } - .dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--has-submit-element .dnb-input__input, - .dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding) * 2.5); } - .dnb-input--password .dnb-input__placeholder, - .dnb-input--password .dnb-input__input { - margin-right: 2.5rem; - padding-right: 0; } - .dnb-input--password .dnb-input__placeholder::-ms-clear, - .dnb-input--password .dnb-input__input::-ms-clear { - display: none; } - .dnb-input--password .dnb-input__placeholder::-ms-reveal, - .dnb-input--password .dnb-input__input::-ms-reveal { - display: none; } - .dnb-input--password .dnb-input__placeholder { - padding-right: 4rem; } - .dnb-input--password .dnb-input__input { - font-family: var(--font-family-monospace); } - .dnb-input__row { - display: inline-flex; - align-items: center; } - .dnb-input__suffix { - color: inherit; } - .dnb-input__submit-element { - z-index: 3; - margin-left: calc(1px - 1px - var(--input-height)); - line-height: var(--line-height-basis); } - .dnb-input__submit-button { - position: relative; - align-self: center; - /* IE needs this to stay centered */ } - .dnb-input__submit-button__button { - border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } + text-align: left; +} +.dnb-input__inner { + display: inline-flex; + flex-direction: column; + width: auto; +} +.dnb-input__shell { + position: relative; + display: flex; + align-items: center; + border: var(--input-border-width) solid var(--color-sea-green); +} +.dnb-input__input { + border: none; + outline: none; + word-break: normal; + position: relative; + z-index: 2; +} +.dnb-input__input[disabled] { + user-select: none; + -webkit-user-select: none; + opacity: 1; +} +.dnb-input__shell, .dnb-input__input { + height: var(--input-height); + border-radius: var(--input-border-radius); +} +.dnb-input__placeholder, .dnb-input__input { + width: 100%; + padding-left: var(--input-padding); + padding-right: var(--input-padding); +} +.dnb-input__placeholder, .dnb-input__input, +.dnb-input input.dnb-input__input { + padding-top: 0; + padding-bottom: 0; + color: inherit; + background-color: transparent; + font-size: var(--input-font-size); + line-height: inherit; +} +.dnb-input__placeholder { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.dnb-input input.dnb-input__input[type=file] { + line-height: calc(var(--input-height) - 2px); +} +.dnb-input__input::-webkit-search-cancel-button { + display: none; +} +.dnb-input__input::-ms-clear { + display: none; +} +.dnb-input ::-webkit-file-upload-button { + cursor: pointer; + outline: none; + color: var(--color-sea-green); +} +.dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { + color: var(--color-emerald-green); +} +.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--has-submit-element .dnb-input__input, .dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding) * 2.5); +} +.dnb-input--password .dnb-input__placeholder, .dnb-input--password .dnb-input__input { + margin-right: 2.5rem; + padding-right: 0; +} +.dnb-input--password .dnb-input__placeholder::-ms-clear, .dnb-input--password .dnb-input__input::-ms-clear { + display: none; +} +.dnb-input--password .dnb-input__placeholder::-ms-reveal, .dnb-input--password .dnb-input__input::-ms-reveal { + display: none; +} +.dnb-input--password .dnb-input__placeholder { + padding-right: 4rem; +} +.dnb-input--password .dnb-input__input { + font-family: var(--font-family-monospace); +} +.dnb-input__row { + display: inline-flex; + align-items: center; +} +.dnb-input__suffix { + color: inherit; +} +.dnb-input__submit-element { + z-index: 3; + margin-left: calc(0px - var(--input-height)); + line-height: var(--line-height-basis); +} +.dnb-input__submit-button { + position: relative; + align-self: center; /* IE needs this to stay centered */ +} +.dnb-input__submit-button__button { + border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; +} +.dnb-input > .dnb-form-label { + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-input { + flex-wrap: wrap; + } .dnb-input > .dnb-form-label { - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-input { - flex-wrap: wrap; } - .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - .dnb-input--small { - line-height: var(--input-height--small); } - .dnb-input--small .dnb-input__shell, - .dnb-input--small .dnb-input__input { - height: var(--input-height--small); } - .dnb-input--small .dnb-input__placeholder, - .dnb-input--small .dnb-input__input { - padding-left: var(--input-padding--small); - padding-right: var(--input-padding--small); - font-size: var(--input-font-size--small); } - .dnb-input--small .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--small)); } - .dnb-input--small .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--small); - height: var(--input-height--small); - line-height: var(--input-height--small); } - .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--small) * 2); } - .dnb-input--medium { - line-height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__shell, - .dnb-input--medium .dnb-input__input { - height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__placeholder, - .dnb-input--medium .dnb-input__input { - padding-left: var(--input-padding--medium); - padding-right: var(--input-padding--medium); - font-size: var(--input-font-size--medium); } - .dnb-input--medium .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--medium)); } - .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--medium); - height: var(--input-height--medium); - line-height: var(--input-height--medium); } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--medium) * 3); } - .dnb-input--large { - line-height: var(--input-height--large); } - .dnb-input--large .dnb-input__shell, - .dnb-input--large .dnb-input__input { - height: var(--input-height--large); } - .dnb-input--large .dnb-input__placeholder, - .dnb-input--large .dnb-input__input { - padding-left: var(--input-padding--large); - padding-right: var(--input-padding--large); - font-size: var(--input-font-size--large); } - .dnb-input--large .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large)); } - .dnb-input--large .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--large); - height: var(--input-height--large); } - .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--large) * 3); } - .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large) + 0.5rem); } - .dnb-input__align--center .dnb-input__placeholder, - .dnb-input__align--center .dnb-input__input { - text-align: center; } - .dnb-input__align--right .dnb-input__placeholder, - .dnb-input__align--right .dnb-input__input { - text-align: right; } - .dnb-input--clear.dnb-input__submit-element { - opacity: 0; - transition: opacity 200ms ease-in-out; } - .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); - border-radius: var(--button-border-radius); } - .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { - margin: auto; } - html:not([data-whatintent='touch']) -.dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { - cursor: default; } - .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: 1rem; - height: 1rem; } - .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, - .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); } - .dnb-input[data-has-content='true'] .dnb-input--clear { - opacity: 1; } - .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2.5rem; } - .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2rem; } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3rem; } - .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3.5rem; } - .dnb-input__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-input--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +.dnb-input--small { + line-height: var(--input-height--small); +} +.dnb-input--small .dnb-input__shell, +.dnb-input--small .dnb-input__input { + height: var(--input-height--small); +} +.dnb-input--small .dnb-input__placeholder, +.dnb-input--small .dnb-input__input { + padding-left: var(--input-padding--small); + padding-right: var(--input-padding--small); + font-size: var(--input-font-size--small); +} +.dnb-input--small .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--small)); +} +.dnb-input--small .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--small); + height: var(--input-height--small); + line-height: var(--input-height--small); +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--small) * 2); +} +.dnb-input--medium { + line-height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__shell, +.dnb-input--medium .dnb-input__input { + height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__placeholder, +.dnb-input--medium .dnb-input__input { + padding-left: var(--input-padding--medium); + padding-right: var(--input-padding--medium); + font-size: var(--input-font-size--medium); +} +.dnb-input--medium .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--medium)); +} +.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--medium); + height: var(--input-height--medium); + line-height: var(--input-height--medium); +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--medium) * 3); +} +.dnb-input--large { + line-height: var(--input-height--large); +} +.dnb-input--large .dnb-input__shell, +.dnb-input--large .dnb-input__input { + height: var(--input-height--large); +} +.dnb-input--large .dnb-input__placeholder, +.dnb-input--large .dnb-input__input { + padding-left: var(--input-padding--large); + padding-right: var(--input-padding--large); + font-size: var(--input-font-size--large); +} +.dnb-input--large .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large)); +} +.dnb-input--large .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--large); + height: var(--input-height--large); +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--large) * 3); +} +.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large) + 0.5rem); +} +.dnb-input__align--center .dnb-input__placeholder, .dnb-input__align--center .dnb-input__input { + text-align: center; +} +.dnb-input__align--right .dnb-input__placeholder, .dnb-input__align--right .dnb-input__input { + text-align: right; +} +.dnb-input--clear.dnb-input__submit-element { + opacity: 0; + transition: opacity 200ms ease-in-out; +} +.dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); + border-radius: var(--button-border-radius); +} +.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { + margin: auto; +} +html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { + cursor: default; +} +.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: 1rem; + height: 1rem; +} +.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); +} +.dnb-input[data-has-content=true] .dnb-input--clear { + opacity: 1; +} +.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2.5rem; +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2rem; +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3rem; +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3.5rem; +} +.dnb-input__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-input--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-input--stretch { + display: flex; + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner { + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { + width: 100%; +} +.dnb-input--stretch .dnb-form-label + .dnb-input__inner { + width: auto; +} +.dnb-input--vertical.dnb-input--stretch .dnb-input__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-input--stretch { + width: 100%; +} +.dnb-input__icon { + order: 0; + position: absolute; + left: 1rem; + right: auto; + top: 0; + bottom: 0; + margin: auto; +} +.dnb-input--icon-position-right .dnb-input__icon { + order: 1; + left: auto; + right: 1rem; +} +.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 2.5rem; +} +.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 2.5rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 3rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 3rem; +} +html[data-visual-test] .dnb-input__input { + caret-color: var(--color-white); +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-input { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-input--stretch { - display: flex; - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner { - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { - width: 100%; } - .dnb-input--stretch .dnb-form-label + .dnb-input__inner { - width: auto; } - .dnb-input--vertical.dnb-input--stretch .dnb-input__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-input--stretch { - width: 100%; } - .dnb-input__icon { - order: 0; - position: absolute; - left: 1rem; - right: auto; - top: 0; - bottom: 0; - margin: auto; } - .dnb-input--icon-position-right .dnb-input__icon { - order: 1; - left: auto; - right: 1rem; } - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 2.5rem; } - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 2.5rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 3rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 3rem; } - html[data-visual-test] .dnb-input__input { - caret-color: var(--color-white); } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-input { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-input__row { - align-items: flex-start; } - .dnb-responsive-component .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; } } + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-input__row { + align-items: flex-start; + } + .dnb-responsive-component .dnb-input > .dnb-form-label { + margin-bottom: 0.5rem; + } +} /* * InputMasked component * */ +/* + * Utilities + */ .dnb-input-masked--guide { - font-family: var(--font-family-monospace); } -" + font-family: var(--font-family-monospace); +}" `; 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 c4b11012915..175109dc0a4 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 @@ -726,91 +726,104 @@ exports[`Input scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-input { - color: var(--color-black); } - .dnb-input__inner { - color: inherit; } + color: var(--color-black); +} +.dnb-input__inner { + color: inherit; +} +.dnb-input__shell { + color: inherit; + background-color: var(--color-white); + border: none; + --border-color: var(--color-sea-green); + box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-input__shell { + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-input__shell { - color: inherit; - background-color: var(--color-white); - border: none; - --border-color: var(--color-sea-green); - box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-input__shell { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-input__shell { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - .dnb-input__icon { - color: var(--color-sea-green); } - .dnb-input[data-input-state='disabled'] .dnb-input__shell { - -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 */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; - background-color: var(--color-black-3); } - .dnb-input[data-input-state='disabled'] .dnb-input__shell, - .dnb-input[data-input-state='disabled'] .dnb-input__shell .dnb-icon { - color: var(--color-black-55); } - @supports (-webkit-touch-callout: none) { - .dnb-input[data-input-state='disabled'] .dnb-input__shell { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-input[data-input-state='disabled'] .dnb-input__shell { - box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, - .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { - --border-color: var(--color-sea-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-input__status--error.dnb-input:not([data-input-state='focus']) .dnb-input__shell { - color: var(--color-fire-red); } - .dnb-input__status--error.dnb-input:not([data-input-state='focus']):not(:hover) .dnb-input__shell { - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-input__status--error.dnb-input[data-input-state='focus'] .dnb-input__shell, - .dnb-input__status--error.dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, - .dnb-input__status--error.dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { - --border-color: var(--color-fire-red); - 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([disabled]):hover, html:not([data-whatintent='touch']) -.dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):hover::after, - html:not([data-whatintent='touch']) -.dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):focus, - html:not([data-whatintent='touch']) -.dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([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([disabled]):hover:active, - html:not([data-whatintent='touch']) -.dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):focus:active { - color: var(--color-white); } - .dnb-input__status--error .dnb-input__icon { - color: var(--color-fire-red); } - .dnb-input__input::selection { - background-color: var(--color-mint-green); - color: var(--color-black); - text-shadow: none; } - .dnb-input__placeholder { - color: var(--color-black-55); } - .dnb-input[data-input-state='focus'] .dnb-input__placeholder { - display: none; } - .dnb-input--keep-placeholder .dnb-input[data-input-state='focus'] .dnb-input__placeholder { - display: block; - color: var(--color-black-20); } -" + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +.dnb-input__icon { + color: var(--color-sea-green); +} +.dnb-input[data-input-state=disabled] .dnb-input__shell { + -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 */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; + background-color: var(--color-black-3); +} +.dnb-input[data-input-state=disabled] .dnb-input__shell, +.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon { + color: var(--color-black-55); +} +@supports (-webkit-touch-callout: none) { + .dnb-input[data-input-state=disabled] .dnb-input__shell { + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-input[data-input-state=disabled] .dnb-input__shell { + box-shadow: 0 0 0 var(--input-border-width) var(--border-color); + } +} +.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover, .dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell { + --border-color: var(--color-sea-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-input__status--error.dnb-input:not([data-input-state=focus]) .dnb-input__shell { + color: var(--color-fire-red); +} +.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell { + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell { + --border-color: var(--color-fire-red); + 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 { + 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 { + color: var(--color-white); +} +.dnb-input__status--error .dnb-input__icon { + color: var(--color-fire-red); +} +.dnb-input__input::selection { + background-color: var(--color-mint-green); + color: var(--color-black); + text-shadow: none; +} +.dnb-input__placeholder { + color: var(--color-black-55); +} +.dnb-input[data-input-state=focus] .dnb-input__placeholder { + display: none; +} +.dnb-input--keep-placeholder .dnb-input[data-input-state=focus] .dnb-input__placeholder { + display: block; + color: var(--color-black-20); +}" `; exports[`Input scss have to match snapshot 1`] = ` @@ -825,14 +838,23 @@ exports[`Input scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -840,63 +862,81 @@ exports[`Input scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -907,156 +947,205 @@ exports[`Input scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1074,7 +1163,8 @@ exports[`Input scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1092,164 +1182,421 @@ exports[`Input scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} + +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -1260,25 +1607,124 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Input component * */ +/* + * Utilities + */ :root { --input-font-size: var(--font-size-basis); --input-font-size--small: var(--font-size-basis); @@ -1293,269 +1739,327 @@ legend.dnb-form-label { --input-height--medium: 2.5rem; --input-height--large: 3rem; --input-border-width: 0.0625rem; - --input-border-radius: 0.25rem; } + --input-border-radius: 0.25rem; +} .dnb-input { display: inline-flex; align-items: center; font-size: var(--input-font-small); line-height: var(--input-height); - text-align: left; } - .dnb-input__inner { - display: inline-flex; - flex-direction: column; - width: auto; } - .dnb-input__shell { - position: relative; - display: flex; - align-items: center; - border: var(--input-border-width) solid var(--color-sea-green); } - .dnb-input__input { - border: none; - outline: none; - word-break: normal; - position: relative; - z-index: 2; } - .dnb-input__input[disabled] { - user-select: none; - -webkit-user-select: none; - opacity: 1; } - .dnb-input__shell, .dnb-input__input { - height: var(--input-height); - border-radius: var(--input-border-radius); } - .dnb-input__placeholder, .dnb-input__input { - width: 100%; - padding-left: var(--input-padding); - padding-right: var(--input-padding); } - .dnb-input__placeholder, .dnb-input__input, - .dnb-input input.dnb-input__input { - padding-top: 0; - padding-bottom: 0; - color: inherit; - background-color: transparent; - font-size: var(--input-font-size); - line-height: inherit; } - .dnb-input__placeholder { - pointer-events: none; - position: absolute; - z-index: 1; - top: 0; - left: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - .dnb-input input.dnb-input__input[type='file'] { - line-height: calc(var(--input-height) - 2px); } - .dnb-input__input::-webkit-search-cancel-button { - display: none; } - .dnb-input__input::-ms-clear { - display: none; } - .dnb-input ::-webkit-file-upload-button { - cursor: pointer; - outline: none; - color: var(--color-sea-green); } - .dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { - color: var(--color-emerald-green); } - .dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--has-submit-element .dnb-input__input, - .dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding) * 2.5); } - .dnb-input--password .dnb-input__placeholder, - .dnb-input--password .dnb-input__input { - margin-right: 2.5rem; - padding-right: 0; } - .dnb-input--password .dnb-input__placeholder::-ms-clear, - .dnb-input--password .dnb-input__input::-ms-clear { - display: none; } - .dnb-input--password .dnb-input__placeholder::-ms-reveal, - .dnb-input--password .dnb-input__input::-ms-reveal { - display: none; } - .dnb-input--password .dnb-input__placeholder { - padding-right: 4rem; } - .dnb-input--password .dnb-input__input { - font-family: var(--font-family-monospace); } - .dnb-input__row { - display: inline-flex; - align-items: center; } - .dnb-input__suffix { - color: inherit; } - .dnb-input__submit-element { - z-index: 3; - margin-left: calc(1px - 1px - var(--input-height)); - line-height: var(--line-height-basis); } - .dnb-input__submit-button { - position: relative; - align-self: center; - /* IE needs this to stay centered */ } - .dnb-input__submit-button__button { - border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } + text-align: left; +} +.dnb-input__inner { + display: inline-flex; + flex-direction: column; + width: auto; +} +.dnb-input__shell { + position: relative; + display: flex; + align-items: center; + border: var(--input-border-width) solid var(--color-sea-green); +} +.dnb-input__input { + border: none; + outline: none; + word-break: normal; + position: relative; + z-index: 2; +} +.dnb-input__input[disabled] { + user-select: none; + -webkit-user-select: none; + opacity: 1; +} +.dnb-input__shell, .dnb-input__input { + height: var(--input-height); + border-radius: var(--input-border-radius); +} +.dnb-input__placeholder, .dnb-input__input { + width: 100%; + padding-left: var(--input-padding); + padding-right: var(--input-padding); +} +.dnb-input__placeholder, .dnb-input__input, +.dnb-input input.dnb-input__input { + padding-top: 0; + padding-bottom: 0; + color: inherit; + background-color: transparent; + font-size: var(--input-font-size); + line-height: inherit; +} +.dnb-input__placeholder { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.dnb-input input.dnb-input__input[type=file] { + line-height: calc(var(--input-height) - 2px); +} +.dnb-input__input::-webkit-search-cancel-button { + display: none; +} +.dnb-input__input::-ms-clear { + display: none; +} +.dnb-input ::-webkit-file-upload-button { + cursor: pointer; + outline: none; + color: var(--color-sea-green); +} +.dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover { + color: var(--color-emerald-green); +} +.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--has-submit-element .dnb-input__input, .dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding) * 2.5); +} +.dnb-input--password .dnb-input__placeholder, .dnb-input--password .dnb-input__input { + margin-right: 2.5rem; + padding-right: 0; +} +.dnb-input--password .dnb-input__placeholder::-ms-clear, .dnb-input--password .dnb-input__input::-ms-clear { + display: none; +} +.dnb-input--password .dnb-input__placeholder::-ms-reveal, .dnb-input--password .dnb-input__input::-ms-reveal { + display: none; +} +.dnb-input--password .dnb-input__placeholder { + padding-right: 4rem; +} +.dnb-input--password .dnb-input__input { + font-family: var(--font-family-monospace); +} +.dnb-input__row { + display: inline-flex; + align-items: center; +} +.dnb-input__suffix { + color: inherit; +} +.dnb-input__submit-element { + z-index: 3; + margin-left: calc(0px - var(--input-height)); + line-height: var(--line-height-basis); +} +.dnb-input__submit-button { + position: relative; + align-self: center; /* IE needs this to stay centered */ +} +.dnb-input__submit-button__button { + border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; +} +.dnb-input > .dnb-form-label { + line-height: var(--line-height-basis); +} +@media screen and (max-width: 40em) { + .dnb-input { + flex-wrap: wrap; + } .dnb-input > .dnb-form-label { - line-height: var(--line-height-basis); } - @media screen and (max-width: 40em) { - .dnb-input { - flex-wrap: wrap; } - .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-input:not(.dnb-input--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - .dnb-input--small { - line-height: var(--input-height--small); } - .dnb-input--small .dnb-input__shell, - .dnb-input--small .dnb-input__input { - height: var(--input-height--small); } - .dnb-input--small .dnb-input__placeholder, - .dnb-input--small .dnb-input__input { - padding-left: var(--input-padding--small); - padding-right: var(--input-padding--small); - font-size: var(--input-font-size--small); } - .dnb-input--small .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--small)); } - .dnb-input--small .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--small); - height: var(--input-height--small); - line-height: var(--input-height--small); } - .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--small) * 2); } - .dnb-input--medium { - line-height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__shell, - .dnb-input--medium .dnb-input__input { - height: var(--input-height--medium); } - .dnb-input--medium .dnb-input__placeholder, - .dnb-input--medium .dnb-input__input { - padding-left: var(--input-padding--medium); - padding-right: var(--input-padding--medium); - font-size: var(--input-font-size--medium); } - .dnb-input--medium .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--medium)); } - .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--medium); - height: var(--input-height--medium); - line-height: var(--input-height--medium); } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--medium) * 3); } - .dnb-input--large { - line-height: var(--input-height--large); } - .dnb-input--large .dnb-input__shell, - .dnb-input--large .dnb-input__input { - height: var(--input-height--large); } - .dnb-input--large .dnb-input__placeholder, - .dnb-input--large .dnb-input__input { - padding-left: var(--input-padding--large); - padding-right: var(--input-padding--large); - font-size: var(--input-font-size--large); } - .dnb-input--large .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large)); } - .dnb-input--large .dnb-input__submit-element .dnb-button--input-button { - width: var(--input-height--large); - height: var(--input-height--large); } - .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, - .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { - padding-right: calc(var(--input-padding--large) * 3); } - .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { - margin-left: calc(1px - 1px - var(--input-height--large) + 0.5rem); } - .dnb-input__align--center .dnb-input__placeholder, - .dnb-input__align--center .dnb-input__input { - text-align: center; } - .dnb-input__align--right .dnb-input__placeholder, - .dnb-input__align--right .dnb-input__input { - text-align: right; } - .dnb-input--clear.dnb-input__submit-element { - opacity: 0; - transition: opacity 200ms ease-in-out; } - .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); - border-radius: var(--button-border-radius); } - .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { - margin: auto; } - html:not([data-whatintent='touch']) -.dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { - cursor: default; } - .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: 1rem; - height: 1rem; } - .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, - .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { - width: var(--input-height--small); - height: var(--input-height--small); } - .dnb-input[data-has-content='true'] .dnb-input--clear { - opacity: 1; } - .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2.5rem; } - .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 2rem; } - .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3rem; } - .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { - margin-right: 3.5rem; } - .dnb-input__inner > .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-input--vertical { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +.dnb-input--small { + line-height: var(--input-height--small); +} +.dnb-input--small .dnb-input__shell, +.dnb-input--small .dnb-input__input { + height: var(--input-height--small); +} +.dnb-input--small .dnb-input__placeholder, +.dnb-input--small .dnb-input__input { + padding-left: var(--input-padding--small); + padding-right: var(--input-padding--small); + font-size: var(--input-font-size--small); +} +.dnb-input--small .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--small)); +} +.dnb-input--small .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--small); + height: var(--input-height--small); + line-height: var(--input-height--small); +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--small.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--small) * 2); +} +.dnb-input--medium { + line-height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__shell, +.dnb-input--medium .dnb-input__input { + height: var(--input-height--medium); +} +.dnb-input--medium .dnb-input__placeholder, +.dnb-input--medium .dnb-input__input { + padding-left: var(--input-padding--medium); + padding-right: var(--input-padding--medium); + font-size: var(--input-font-size--medium); +} +.dnb-input--medium .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--medium)); +} +.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--medium); + height: var(--input-height--medium); + line-height: var(--input-height--medium); +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--medium) * 3); +} +.dnb-input--large { + line-height: var(--input-height--large); +} +.dnb-input--large .dnb-input__shell, +.dnb-input--large .dnb-input__input { + height: var(--input-height--large); +} +.dnb-input--large .dnb-input__placeholder, +.dnb-input--large .dnb-input__input { + padding-left: var(--input-padding--large); + padding-right: var(--input-padding--large); + font-size: var(--input-font-size--large); +} +.dnb-input--large .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large)); +} +.dnb-input--large .dnb-input__submit-element .dnb-button--input-button { + width: var(--input-height--large); + height: var(--input-height--large); +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .dnb-input--large.dnb-input--has-clear-button .dnb-input__input { + padding-right: calc(var(--input-padding--large) * 3); +} +.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element { + margin-left: calc(0px - var(--input-height--large) + 0.5rem); +} +.dnb-input__align--center .dnb-input__placeholder, .dnb-input__align--center .dnb-input__input { + text-align: center; +} +.dnb-input__align--right .dnb-input__placeholder, .dnb-input__align--right .dnb-input__input { + text-align: right; +} +.dnb-input--clear.dnb-input__submit-element { + opacity: 0; + transition: opacity 200ms ease-in-out; +} +.dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); + border-radius: var(--button-border-radius); +} +.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon { + margin: auto; +} +html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] { + cursor: default; +} +.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: 1rem; + height: 1rem; +} +.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button { + width: var(--input-height--small); + height: var(--input-height--small); +} +.dnb-input[data-has-content=true] .dnb-input--clear { + opacity: 1; +} +.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2.5rem; +} +.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 2rem; +} +.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3rem; +} +.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element { + margin-right: 3.5rem; +} +.dnb-input__inner > .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-input--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-input--stretch { + display: flex; + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner { + flex-grow: 1; +} +.dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { + width: 100%; +} +.dnb-input--stretch .dnb-form-label + .dnb-input__inner { + width: auto; +} +.dnb-input--vertical.dnb-input--stretch .dnb-input__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-input--stretch { + width: 100%; +} +.dnb-input__icon { + order: 0; + position: absolute; + left: 1rem; + right: auto; + top: 0; + bottom: 0; + margin: auto; +} +.dnb-input--icon-position-right .dnb-input__icon { + order: 1; + left: auto; + right: 1rem; +} +.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 2.5rem; +} +.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 2.5rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { + padding-left: 3rem; +} +.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { + padding-right: 3rem; +} +html[data-visual-test] .dnb-input__input { + caret-color: var(--color-white); +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-input { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-input--stretch { - display: flex; - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner { - flex-grow: 1; } - .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell { - width: 100%; } - .dnb-input--stretch .dnb-form-label + .dnb-input__inner { - width: auto; } - .dnb-input--vertical.dnb-input--stretch .dnb-input__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-input--stretch { - width: 100%; } - .dnb-input__icon { - order: 0; - position: absolute; - left: 1rem; - right: auto; - top: 0; - bottom: 0; - margin: auto; } - .dnb-input--icon-position-right .dnb-input__icon { - order: 1; - left: auto; - right: 1rem; } - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 2.5rem; } - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 2.5rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder { - padding-left: 3rem; } - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, - .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder { - padding-right: 3rem; } - html[data-visual-test] .dnb-input__input { - caret-color: var(--color-white); } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-input { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-input__row { - align-items: flex-start; } - .dnb-responsive-component .dnb-input > .dnb-form-label { - margin-bottom: 0.5rem; } } -" + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-input__row { + align-items: flex-start; + } + .dnb-responsive-component .dnb-input > .dnb-form-label { + margin-bottom: 0.5rem; + } +}" `; 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 b8ba17d3756..9d80cd189c0 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 @@ -54,25 +54,33 @@ exports[`Logo scss have to match snapshot 1`] = ` * Logo Component * */ +/* + * Utilities + */ .dnb-logo { display: inline-flex; vertical-align: baseline; font-size: inherit; line-height: var(--line-height-xx-small--em); color: var(--color-sea-green); - height: 1em; } - .dnb-logo--inherit-color { - color: currentColor; } - .dnb-logo svg { - fill: currentColor; - shape-rendering: geometricPrecision; } - .dnb-logo--has-size { - width: auto; - height: auto; } - .dnb-logo--inherit-size { - height: inherit; } - .dnb-logo svg:not([width]):not([height]) { - width: inherit; - height: inherit; } -" + height: 1em; +} +.dnb-logo--inherit-color { + color: currentColor; +} +.dnb-logo svg { + fill: currentColor; + shape-rendering: geometricPrecision; +} +.dnb-logo--has-size { + width: auto; + height: auto; +} +.dnb-logo--inherit-size { + height: inherit; +} +.dnb-logo svg:not([width]):not([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 abaee5f0e87..424e4e0b74c 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 @@ -1339,18 +1339,30 @@ exports[`Modal scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1358,63 +1370,81 @@ exports[`Modal scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1425,156 +1455,205 @@ exports[`Modal scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1592,7 +1671,8 @@ exports[`Modal scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1610,155 +1690,199 @@ exports[`Modal scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * HelpButton component @@ -1770,6 +1894,9 @@ button.dnb-button::-moz-focus-inner { * Modal component * */ +/* + * Utilities + */ /* * Modal component * @@ -1777,146 +1904,186 @@ button.dnb-button::-moz-focus-inner { @keyframes show-modal { from { opacity: 0.1; - transform: translate3d(0, -1rem, 0); } + transform: translate3d(0, -1rem, 0); + } to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 1rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-drawer { to { transform: translate3d(0, 0, 0); - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-drawer-left { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(-20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-top { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, -20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-bottom { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(0, 20rem, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes hide-drawer-right { from { transform: translate3d(0, 0, 0); - opacity: 1; } + opacity: 1; + } to { transform: translate3d(20rem, 0, 0); - opacity: 0; } } - + opacity: 0; + } +} @keyframes show-modal-overlay { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-modal-overlay { from { - opacity: 1; } + opacity: 1; + } to { - opacity: 0; } } - + opacity: 0; + } +} :root { --modal-z-index: 3000; - --modal-animation-duration: 300ms; } + --modal-animation-duration: 300ms; +} html[data-dnb-modal-active] { user-select: none; - -webkit-user-select: none; } + -webkit-user-select: none; +} #dnb-modal-root { position: absolute; top: 0; - left: 0; } + left: 0; +} .dnb-modal { - /* stylelint-disable-next-line */ } - .dnb-modal__content { - position: fixed; - top: 0; - left: 0; - z-index: calc(var(--modal-z-index) + 1); - display: flex; - align-items: center; - justify-content: center; - max-width: 100vw; - width: 100%; - height: 100%; - user-select: none; - -webkit-user-select: none; } - @media screen and (max-width: 40em) { - .dnb-modal__content--auto-fullscreen { - height: auto; } } - .dnb-modal__content--fullscreen { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--fullscreen .dnb-modal__content__content { - height: auto; } - .dnb-modal__content--left, .dnb-modal__content--top { - align-items: flex-start; - justify-content: flex-start; } - .dnb-modal__content--right { - align-items: flex-start; - justify-content: flex-end; } - .dnb-modal__content--bottom { - align-items: flex-end; - justify-content: flex-start; } - .dnb-modal__overlay { - position: fixed; - z-index: var(--modal-z-index); - left: 0; - top: 0; - width: 100%; - height: 100%; } - .dnb-modal-root__inner .dnb-modal__overlay { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out; } - .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { - animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } - html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { - animation-delay: 0ms !important; - animation-duration: 0ms !important; } - .dnb-modal-root__inner { - position: relative; - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 2); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 3); } - .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { - z-index: calc(var(--modal-z-index) + 4); } - .dnb-modal__close-button { - z-index: calc(var(--modal-z-index) + 1); } - .dnb-modal__header__bar.dnb-section { - display: flex; - flex-direction: row; - justify-content: space-between; } + /* stylelint-disable-next-line */ +} +.dnb-modal__content { + position: fixed; + top: 0; + left: 0; + z-index: calc(var(--modal-z-index) + 1); + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + width: 100%; + height: 100%; + user-select: none; + -webkit-user-select: none; +} +@media screen and (max-width: 40em) { + .dnb-modal__content--auto-fullscreen { + height: auto; + } +} +.dnb-modal__content--fullscreen { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--fullscreen .dnb-modal__content__content { + height: auto; +} +.dnb-modal__content--left, .dnb-modal__content--top { + align-items: flex-start; + justify-content: flex-start; +} +.dnb-modal__content--right { + align-items: flex-start; + justify-content: flex-end; +} +.dnb-modal__content--bottom { + align-items: flex-end; + justify-content: flex-start; +} +.dnb-modal__overlay { + position: fixed; + z-index: var(--modal-z-index); + left: 0; + top: 0; + width: 100%; + height: 100%; +} +.dnb-modal-root__inner .dnb-modal__overlay { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay { + animation: show-modal-overlay var(--modal-animation-duration) ease-out; +} +.dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { + animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; +} +html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { + animation-delay: 0ms !important; + animation-duration: 0ms !important; +} +.dnb-modal-root__inner { + position: relative; + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 2); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 3); +} +.dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner { + z-index: calc(var(--modal-z-index) + 4); +} +.dnb-modal__close-button { + z-index: calc(var(--modal-z-index) + 1); +} +.dnb-modal__header__bar.dnb-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} [data-visual-test].hide-page-content #___gatsby { - opacity: 0; } -" + opacity: 0; +}" `; diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap index 535da2f5cce..8826db65edf 100644 --- a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap +++ b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap @@ -83,10 +83,16 @@ exports[`NumberFormat scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -97,122 +103,158 @@ exports[`NumberFormat scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * NumberFormat Component * */ +/* + * Utilities + */ /* * Anchor mixins * */ +/* + * Utilities + */ .dnb-number-format { display: inline-block; position: relative; speak-as: numbers; color: inherit; - white-space: nowrap; } - .dnb-number-format__prefix, .dnb-number-format__suffix { - white-space: normal; } - .dnb-number-format.dnb-anchor { - cursor: pointer; } - .dnb-number-format--selectall { - cursor: text; } - .dnb-number-format__visible { - position: relative; - z-index: 2; } - .dnb-number-format--selected .dnb-number-format__visible { - color: var(--color-black); - background-color: var(--color-mint-green); } - .dnb-number-format__selection { - position: absolute; - z-index: 1; - top: 0; - left: 0; - opacity: 0; - user-select: none; } - .dnb-number-format--selected .dnb-number-format__selection { - z-index: 3; - user-select: all; } - .dnb-number-format.dnb-skeleton, - .dnb-skeleton .dnb-number-format { - -webkit-text-fill-color: var(--skeleton-color); } -" + white-space: nowrap; +} +.dnb-number-format__prefix, .dnb-number-format__suffix { + white-space: normal; +} +.dnb-number-format.dnb-anchor { + cursor: pointer; +} +.dnb-number-format--selectall { + cursor: text; +} +.dnb-number-format__visible { + position: relative; + z-index: 2; +} +.dnb-number-format--selected .dnb-number-format__visible { + color: var(--color-black); + background-color: var(--color-mint-green); +} +.dnb-number-format__selection { + position: absolute; + z-index: 1; + top: 0; + left: 0; + opacity: 0; + user-select: none; +} +.dnb-number-format--selected .dnb-number-format__selection { + z-index: 3; + user-select: all; +} +.dnb-number-format.dnb-skeleton, .dnb-skeleton .dnb-number-format { + -webkit-text-fill-color: var(--skeleton-color); +}" `; 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 73c5deb6160..3d31a02ecd8 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 @@ -1600,41 +1600,47 @@ exports[`Pagination scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-pagination__page, .dnb-pagination__loadbar { - min-height: 6rem; } - + min-height: 6rem; +} .dnb-pagination__bar { margin-top: 1rem; - margin-bottom: 1rem; } - + margin-bottom: 1rem; +} .dnb-pagination__indicator { - min-height: inherit; } - .dnb-pagination__indicator__inner { - animation: show-page 300ms ease-out forwards; } - + min-height: inherit; +} +.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 { background-color: var(--color-emerald-green); - color: var(--color-mint-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 { 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 { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } + 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 { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} .dnb-pagination__dots { - color: var(--color-black-55); } + color: var(--color-black-55); +} @keyframes show-page { from { transform: translate3d(0, -8px, 0); - opacity: 0.1; } + opacity: 0.1; + } to { transform: translate3d(0, 0, 0); - opacity: 1; } } -" + opacity: 1; + } +}" `; exports[`Pagination scss have to match snapshot 1`] = ` @@ -1649,14 +1655,23 @@ exports[`Pagination scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1664,63 +1679,81 @@ exports[`Pagination scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1731,156 +1764,205 @@ exports[`Pagination scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1898,7 +1980,8 @@ exports[`Pagination scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1916,378 +1999,499 @@ exports[`Pagination scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * ProgressIndicator component * */ +/* + * Utilities + */ :root { --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99); --progress-indicator-circular-circle: 88; --progress-indicator-circular-circle-offset--min: 88; - --progress-indicator-circular-circle-offset--max: 1; } + --progress-indicator-circular-circle-offset--max: 1; +} .dnb-progress-indicator { position: relative; display: inline-flex; - align-items: center; } - .dnb-progress-indicator--vertical { - flex-direction: column; } - .dnb-progress-indicator--horizontal { - justify-content: center; } - .dnb-progress-indicator__label { - display: inline-flex; } - .dnb-progress-indicator__label .dnb-p { - align-self: center; } - .dnb-spacing .dnb-progress-indicator .dnb-p, - .dnb-spacing .dnb-progress-indicator .dnb-p:not([class*='dnb-space']) { - margin: 0; } - .dnb-progress-indicator--horizontal .dnb-progress-indicator__label { - margin: 0 1rem; } - .dnb-progress-indicator--vertical .dnb-progress-indicator__label { - margin-top: 0.5rem; } - .dnb-progress-indicator__circular { - position: relative; - width: 2rem; - height: 2rem; - transform: rotate(-90deg); } - .dnb-progress-indicator__circular svg { - position: absolute; - width: 100%; - height: 100%; } - .dnb-progress-indicator__circular__line { - animation-duration: 2s; - animation-delay: 200ms; - animation-timing-function: var(--progress-indicator-timing); - animation-iteration-count: infinite; } - .dnb-progress-indicator__circular__line.background { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.light { - animation-name: progress-indicator-circular-line-light; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.dark { - animation-name: progress-indicator-circular-line-dark; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } - .dnb-progress-indicator__circular__line.paused { - animation-play-state: paused; } - .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { - transition: stroke-dashoffset 600ms var(--progress-indicator-timing); } - .dnb-progress-indicator__circular__circle { - stroke-linecap: round; } - .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { - stroke: grey; } - .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke: var(--color-black); } - .dnb-progress-indicator__linear { - position: relative; - overflow: hidden; - width: 100%; - will-change: transform; - height: 0.5rem; - border-radius: 0.25rem; } - .dnb-progress-indicator__linear__bar { - width: 100%; - position: absolute; - left: 0; - bottom: 0; - top: 0; - transform-origin: left; - border-radius: inherit; } - .dnb-progress-indicator__linear__bar-transition { - transition: transform 0.2s linear; } - .dnb-progress-indicator__linear__bar1-animation { - width: auto; - animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } - .dnb-progress-indicator__linear__bar2-animation { - width: auto; - animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; } - .dnb-progress-indicator, .dnb-progress-indicator--visible { - opacity: 0; - animation: progress-indicator-fade-in 200ms ease-out 1 forwards; } - .dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { - animation: progress-indicator-fade-out 600ms ease-out 1 forwards; } - .dnb-progress-indicator--no-animation { - animation-duration: 0ms; } - html[data-visual-test] .dnb-progress-indicator__circular__line { - animation-duration: 0ms; - animation-iteration-count: 0; } - html[data-visual-test] .dnb-progress-indicator__bar-transition { - transition: none; } - .dnb-progress-indicator--full-width { - width: 100%; - min-width: 1rem; } + align-items: center; +} +.dnb-progress-indicator--vertical { + flex-direction: column; +} +.dnb-progress-indicator--horizontal { + justify-content: center; +} +.dnb-progress-indicator__label { + display: inline-flex; +} +.dnb-progress-indicator__label .dnb-p { + align-self: center; +} +.dnb-spacing .dnb-progress-indicator .dnb-p, +.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]) { + margin: 0; +} +.dnb-progress-indicator--horizontal .dnb-progress-indicator__label { + margin: 0 1rem; +} +.dnb-progress-indicator--vertical .dnb-progress-indicator__label { + margin-top: 0.5rem; +} +.dnb-progress-indicator__circular { + position: relative; + width: 2rem; + height: 2rem; + transform: rotate(-90deg); +} +.dnb-progress-indicator__circular svg { + position: absolute; + width: 100%; + height: 100%; +} +.dnb-progress-indicator__circular__line { + animation-duration: 2s; + animation-delay: 200ms; + animation-timing-function: var(--progress-indicator-timing); + animation-iteration-count: infinite; +} +.dnb-progress-indicator__circular__line.background { + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.light { + animation-name: progress-indicator-circular-line-light; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.dark { + animation-name: progress-indicator-circular-line-dark; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); +} +.dnb-progress-indicator__circular__line.paused { + animation-play-state: paused; +} +.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { + transition: stroke-dashoffset 600ms var(--progress-indicator-timing); +} +.dnb-progress-indicator__circular__circle { + stroke-linecap: round; +} +.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { + stroke: grey; +} +.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { + stroke: var(--color-black); +} +.dnb-progress-indicator__linear { + position: relative; + overflow: hidden; + width: 100%; + will-change: transform; + height: 0.5rem; + border-radius: 0.25rem; +} +.dnb-progress-indicator__linear__bar { + width: 100%; + position: absolute; + left: 0; + bottom: 0; + top: 0; + transform-origin: left; + border-radius: inherit; +} +.dnb-progress-indicator__linear__bar-transition { + transition: transform 0.2s linear; +} +.dnb-progress-indicator__linear__bar1-animation { + width: auto; + animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} +.dnb-progress-indicator__linear__bar2-animation { + width: auto; + animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; +} +.dnb-progress-indicator, .dnb-progress-indicator--visible { + opacity: 0; + animation: progress-indicator-fade-in 200ms ease-out 1 forwards; +} +.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { + animation: progress-indicator-fade-out 600ms ease-out 1 forwards; +} +.dnb-progress-indicator--no-animation { + animation-duration: 0ms; +} +html[data-visual-test] .dnb-progress-indicator__circular__line { + animation-duration: 0ms; + animation-iteration-count: 0; +} +html[data-visual-test] .dnb-progress-indicator__bar-transition { + transition: none; +} +.dnb-progress-indicator--full-width { + width: 100%; + min-width: 1rem; +} @keyframes progress-indicator-fade-in { 0% { - opacity: 0; } + opacity: 0; + } 100% { - opacity: 1; } } - + opacity: 1; + } +} @keyframes progress-indicator-fade-out { 0% { - opacity: 1; } + opacity: 1; + } 100% { - opacity: 0; } } + opacity: 0; + } +} @keyframes progress-indicator-circular-line-light { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-circular-line-dark { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-linear-bar-1 { 0% { left: -35%; - right: 100%; } + right: 100%; + } 60% { left: 100%; - right: -90%; } + right: -90%; + } 100% { left: 100%; - right: -90%; } } - + right: -90%; + } +} @keyframes progress-indicator-linear-bar-2 { 0% { left: -200%; - right: 100%; } + right: 100%; + } 60% { left: 107%; - right: -8%; } + right: -8%; + } 100% { left: 107%; - right: -8%; } } - + right: -8%; + } +} /* * Pagination component * */ +/* + * Utilities + */ .dnb-pagination { display: flex; - flex-direction: column-reverse; } - .dnb-pagination__bar, .dnb-pagination__loadbar, .dnb-pagination__bar__inner { - display: flex; - flex-wrap: wrap; - align-items: center; } - .dnb-pagination--left .dnb-pagination__bar { - justify-content: flex-start; } + flex-direction: column-reverse; +} +.dnb-pagination__bar, .dnb-pagination__loadbar, .dnb-pagination__bar__inner { + display: flex; + flex-wrap: wrap; + align-items: center; +} +.dnb-pagination--left .dnb-pagination__bar { + justify-content: flex-start; +} +.dnb-pagination--center .dnb-pagination__bar { + justify-content: center; +} +@media screen and (max-width: 40em) { .dnb-pagination--center .dnb-pagination__bar { - justify-content: center; } - @media screen and (max-width: 40em) { - .dnb-pagination--center .dnb-pagination__bar { - justify-content: flex-start; } } - .dnb-pagination--right .dnb-pagination__bar { - justify-content: flex-end; } - .dnb-pagination__bar__wrapper { - display: flex; - flex-wrap: wrap; - flex-direction: column-reverse; } - .dnb-pagination--center .dnb-pagination__bar__wrapper { - align-items: center; } - .dnb-pagination--right .dnb-pagination__bar__wrapper { - align-items: flex-end; } - .dnb-pagination__bar__inner { - gap: 0.5rem; } - .dnb-pagination__button { - max-width: 3.5rem; } - .dnb-pagination__button--large-number { - max-width: unset; } - .dnb-pagination__loadbar { - cursor: default; - display: flex; - align-items: center; - justify-content: center; } - .dnb-pagination__indicator { - cursor: default; - display: flex; - flex-direction: column; - justify-content: center; } - .dnb-pagination__indicator__inner { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; } - .dnb-pagination__dots { - align-self: flex-end; } - .dnb-pagination__marker { - pointer-events: none; - position: relative; - height: 1px; - width: 1px; - margin: -1px 0 0 -1px; - overflow: hidden; } - .dnb-pagination__marker td, .dnb-pagination__marker__inner { - padding: 0 !important; - width: 1px; - height: 1px; - opacity: 0; } - .dnb-pagination__bar__skip { - margin-top: 0.5rem; } - .dnb-pagination__bar__skip .dnb-button:first-of-type { - margin-right: 1.5rem; } -" + justify-content: flex-start; + } +} +.dnb-pagination--right .dnb-pagination__bar { + justify-content: flex-end; +} +.dnb-pagination__bar__wrapper { + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; +} +.dnb-pagination--center .dnb-pagination__bar__wrapper { + align-items: center; +} +.dnb-pagination--right .dnb-pagination__bar__wrapper { + align-items: flex-end; +} +.dnb-pagination__bar__inner { + gap: 0.5rem; +} +.dnb-pagination__button { + max-width: 3.5rem; +} +.dnb-pagination__button--large-number { + max-width: unset; +} +.dnb-pagination__loadbar { + cursor: default; + display: flex; + align-items: center; + justify-content: center; +} +.dnb-pagination__indicator { + cursor: default; + display: flex; + flex-direction: column; + justify-content: center; +} +.dnb-pagination__indicator__inner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.dnb-pagination__dots { + align-self: flex-end; +} +.dnb-pagination__marker { + pointer-events: none; + position: relative; + height: 1px; + width: 1px; + margin: -1px 0 0 -1px; + overflow: hidden; +} +.dnb-pagination__marker td, .dnb-pagination__marker__inner { + padding: 0 !important; + width: 1px; + height: 1px; + opacity: 0; +} +.dnb-pagination__bar__skip { + margin-top: 0.5rem; +} +.dnb-pagination__bar__skip .dnb-button:first-of-type { + margin-right: 1.5rem; +}" `; diff --git a/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap index 67a80daa5a6..105cbb59609 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap +++ b/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap @@ -195,61 +195,66 @@ exports[`ProgressIndicator scss have to match default theme snapshot 1`] = ` */ .dnb-progress-indicator__circular--small { width: 1rem; - height: 1rem; } - + height: 1rem; +} .dnb-progress-indicator__circular--medium { width: 1.5rem; - height: 1.5rem; } - + height: 1.5rem; +} .dnb-progress-indicator__circular--large { width: 3.5rem; - height: 3.5rem; } - + height: 3.5rem; +} .dnb-progress-indicator__circular--huge { width: 20rem; - height: 20rem; } - + height: 20rem; +} .dnb-progress-indicator__circular__line { - animation-duration: 2s; } - + animation-duration: 2s; +} .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { - stroke: var(--color-mint-green); } - + stroke: var(--color-mint-green); +} .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke: var(--color-emerald-green); } - + stroke: var(--color-emerald-green); +} .dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke-width: 3.1; } - + stroke-width: 3.1; +} .dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke-width: 3.3; } - + stroke-width: 3.3; +} .dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke-width: 3.5; } - + stroke-width: 3.5; +} .dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke-width: 3.7; } - + stroke-width: 3.7; +} .dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke-width: 3.9; } - + stroke-width: 3.9; +} .dnb-progress-indicator__linear { - background-color: var(--color-black-8); } - .dnb-progress-indicator__linear--small { - height: 0.25rem; - border-radius: 0.125rem; } - .dnb-progress-indicator__linear--medium { - height: 1rem; - border-radius: 0.5rem; } - .dnb-progress-indicator__linear--large { - height: 1.5rem; - border-radius: 0.75rem; } - .dnb-progress-indicator__linear--huge { - height: 2rem; - border-radius: 1rem; } - .dnb-progress-indicator__linear__bar { - background-color: var(--color-sea-green); } -" + background-color: var(--color-black-8); +} +.dnb-progress-indicator__linear--small { + height: 0.25rem; + border-radius: 0.125rem; +} +.dnb-progress-indicator__linear--medium { + height: 1rem; + border-radius: 0.5rem; +} +.dnb-progress-indicator__linear--large { + height: 1.5rem; + border-radius: 0.75rem; +} +.dnb-progress-indicator__linear--huge { + height: 2rem; + border-radius: 1rem; +} +.dnb-progress-indicator__linear__bar { + background-color: var(--color-sea-green); +}" `; exports[`ProgressIndicator scss have to match snapshot 1`] = ` @@ -264,152 +269,203 @@ exports[`ProgressIndicator scss have to match snapshot 1`] = ` * ProgressIndicator component * */ +/* + * Utilities + */ :root { --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99); --progress-indicator-circular-circle: 88; --progress-indicator-circular-circle-offset--min: 88; - --progress-indicator-circular-circle-offset--max: 1; } + --progress-indicator-circular-circle-offset--max: 1; +} .dnb-progress-indicator { position: relative; display: inline-flex; - align-items: center; } - .dnb-progress-indicator--vertical { - flex-direction: column; } - .dnb-progress-indicator--horizontal { - justify-content: center; } - .dnb-progress-indicator__label { - display: inline-flex; } - .dnb-progress-indicator__label .dnb-p { - align-self: center; } - .dnb-spacing .dnb-progress-indicator .dnb-p, - .dnb-spacing .dnb-progress-indicator .dnb-p:not([class*='dnb-space']) { - margin: 0; } - .dnb-progress-indicator--horizontal .dnb-progress-indicator__label { - margin: 0 1rem; } - .dnb-progress-indicator--vertical .dnb-progress-indicator__label { - margin-top: 0.5rem; } - .dnb-progress-indicator__circular { - position: relative; - width: 2rem; - height: 2rem; - transform: rotate(-90deg); } - .dnb-progress-indicator__circular svg { - position: absolute; - width: 100%; - height: 100%; } - .dnb-progress-indicator__circular__line { - animation-duration: 2s; - animation-delay: 200ms; - animation-timing-function: var(--progress-indicator-timing); - animation-iteration-count: infinite; } - .dnb-progress-indicator__circular__line.background { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.light { - animation-name: progress-indicator-circular-line-light; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } - .dnb-progress-indicator__circular__line.dark { - animation-name: progress-indicator-circular-line-dark; - stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } - .dnb-progress-indicator__circular__line.paused { - animation-play-state: paused; } - .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { - transition: stroke-dashoffset 600ms var(--progress-indicator-timing); } - .dnb-progress-indicator__circular__circle { - stroke-linecap: round; } - .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { - stroke: grey; } - .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { - stroke: var(--color-black); } - .dnb-progress-indicator__linear { - position: relative; - overflow: hidden; - width: 100%; - will-change: transform; - height: 0.5rem; - border-radius: 0.25rem; } - .dnb-progress-indicator__linear__bar { - width: 100%; - position: absolute; - left: 0; - bottom: 0; - top: 0; - transform-origin: left; - border-radius: inherit; } - .dnb-progress-indicator__linear__bar-transition { - transition: transform 0.2s linear; } - .dnb-progress-indicator__linear__bar1-animation { - width: auto; - animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } - .dnb-progress-indicator__linear__bar2-animation { - width: auto; - animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; } - .dnb-progress-indicator, .dnb-progress-indicator--visible { - opacity: 0; - animation: progress-indicator-fade-in 200ms ease-out 1 forwards; } - .dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { - animation: progress-indicator-fade-out 600ms ease-out 1 forwards; } - .dnb-progress-indicator--no-animation { - animation-duration: 0ms; } - html[data-visual-test] .dnb-progress-indicator__circular__line { - animation-duration: 0ms; - animation-iteration-count: 0; } - html[data-visual-test] .dnb-progress-indicator__bar-transition { - transition: none; } - .dnb-progress-indicator--full-width { - width: 100%; - min-width: 1rem; } + align-items: center; +} +.dnb-progress-indicator--vertical { + flex-direction: column; +} +.dnb-progress-indicator--horizontal { + justify-content: center; +} +.dnb-progress-indicator__label { + display: inline-flex; +} +.dnb-progress-indicator__label .dnb-p { + align-self: center; +} +.dnb-spacing .dnb-progress-indicator .dnb-p, +.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]) { + margin: 0; +} +.dnb-progress-indicator--horizontal .dnb-progress-indicator__label { + margin: 0 1rem; +} +.dnb-progress-indicator--vertical .dnb-progress-indicator__label { + margin-top: 0.5rem; +} +.dnb-progress-indicator__circular { + position: relative; + width: 2rem; + height: 2rem; + transform: rotate(-90deg); +} +.dnb-progress-indicator__circular svg { + position: absolute; + width: 100%; + height: 100%; +} +.dnb-progress-indicator__circular__line { + animation-duration: 2s; + animation-delay: 200ms; + animation-timing-function: var(--progress-indicator-timing); + animation-iteration-count: infinite; +} +.dnb-progress-indicator__circular__line.background { + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.light { + animation-name: progress-indicator-circular-line-light; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); +} +.dnb-progress-indicator__circular__line.dark { + animation-name: progress-indicator-circular-line-dark; + stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle); + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); +} +.dnb-progress-indicator__circular__line.paused { + animation-play-state: paused; +} +.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark { + transition: stroke-dashoffset 600ms var(--progress-indicator-timing); +} +.dnb-progress-indicator__circular__circle { + stroke-linecap: round; +} +.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle { + stroke: grey; +} +.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle { + stroke: var(--color-black); +} +.dnb-progress-indicator__linear { + position: relative; + overflow: hidden; + width: 100%; + will-change: transform; + height: 0.5rem; + border-radius: 0.25rem; +} +.dnb-progress-indicator__linear__bar { + width: 100%; + position: absolute; + left: 0; + bottom: 0; + top: 0; + transform-origin: left; + border-radius: inherit; +} +.dnb-progress-indicator__linear__bar-transition { + transition: transform 0.2s linear; +} +.dnb-progress-indicator__linear__bar1-animation { + width: auto; + animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} +.dnb-progress-indicator__linear__bar2-animation { + width: auto; + animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; +} +.dnb-progress-indicator, .dnb-progress-indicator--visible { + opacity: 0; + animation: progress-indicator-fade-in 200ms ease-out 1 forwards; +} +.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) { + animation: progress-indicator-fade-out 600ms ease-out 1 forwards; +} +.dnb-progress-indicator--no-animation { + animation-duration: 0ms; +} +html[data-visual-test] .dnb-progress-indicator__circular__line { + animation-duration: 0ms; + animation-iteration-count: 0; +} +html[data-visual-test] .dnb-progress-indicator__bar-transition { + transition: none; +} +.dnb-progress-indicator--full-width { + width: 100%; + min-width: 1rem; +} @keyframes progress-indicator-fade-in { 0% { - opacity: 0; } + opacity: 0; + } 100% { - opacity: 1; } } - + opacity: 1; + } +} @keyframes progress-indicator-fade-out { 0% { - opacity: 1; } + opacity: 1; + } 100% { - opacity: 0; } } + opacity: 0; + } +} @keyframes progress-indicator-circular-line-light { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-circular-line-dark { 0% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); + } 50% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } 100% { - stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } } - + stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); + } +} @keyframes progress-indicator-linear-bar-1 { 0% { left: -35%; - right: 100%; } + right: 100%; + } 60% { left: 100%; - right: -90%; } + right: -90%; + } 100% { left: 100%; - right: -90%; } } - + right: -90%; + } +} @keyframes progress-indicator-linear-bar-2 { 0% { left: -200%; - right: 100%; } + right: 100%; + } 60% { left: 107%; - right: -8%; } + right: -8%; + } 100% { left: 107%; - right: -8%; } } -" + right: -8%; + } +}" `; 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 058fc4d1308..1876db68dae 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 @@ -629,75 +629,86 @@ exports[`Radio scss have to match default theme snapshot 1`] = ` /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-radio__dot { - background-color: var(--color-sea-green); - transition: opacity 200ms ease-out, transform 200ms ease-out; } - .dnb-radio__input:checked ~ .dnb-radio__button, - .dnb-radio__input[data-checked='true'] ~ .dnb-radio__button { - background-color: var(--color-white); - border-color: var(--color-sea-green); } - .dnb-radio__input:checked ~ .dnb-radio__dot, - .dnb-radio__input[data-checked='true'] ~ .dnb-radio__dot { - opacity: 1; - transform: scale(1); } - .dnb-radio__input:not(:checked):not([data-checked='true']) ~ .dnb-radio__dot { - opacity: 0; - transform: scale(0.8); } - .dnb-radio__input:not(:checked):not([data-checked='true']) ~ .dnb-radio__button { - background-color: var(--color-white); - border-color: var(--color-sea-green); } - .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, - .dnb-radio__input[disabled][data-checked='true'] ~ .dnb-radio__button { - border-color: var(--color-sea-green-30); } - .dnb-radio__input[disabled]:not(:checked):not([data-checked='true']) ~ .dnb-radio__button { - border-color: var(--color-mint-green-50); } - .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, - .dnb-radio__input[disabled][data-checked='true'] ~ .dnb-radio__dot { - background-color: var(--color-sea-green-30); } - .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, - .dnb-radio__input:not([disabled])[data-checked='true']:active ~ .dnb-radio__button { - border-color: var(--color-mint-green-50); } - .dnb-radio__input:not([disabled]):not(:checked):not([data-checked='true']):active ~ .dnb-radio__button { - background-color: var(--color-mint-green-50); - border-color: transparent; } - .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, - .dnb-radio__input:not([disabled])[data-checked='true']:active ~ .dnb-radio__dot { - background-color: var(--color-mint-green-50); } - .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked='true']):hover ~ .dnb-radio__button { - background-color: var(--color-mint-green-50); } - .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, - .dnb-radio__input:not([disabled]):not(:focus)[data-checked='true']:hover ~ .dnb-radio__dot { - background-color: var(--color-mint-green-50); } - html[data-whatinput='keyboard'] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked='true']):focus ~ .dnb-radio__button { - background-color: var(--color-mint-green-50); } - html[data-whatinput='keyboard'] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button { - border: none; } - .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, - .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus { - display: block; } - .dnb-radio__input:not([disabled]):not(:checked):not([data-checked='true']):focus ~ .dnb-radio__button, - .dnb-radio__input:not([disabled]):not(:checked):not([data-checked='true']):active ~ .dnb-radio__button { - background-color: var(--color-mint-green-50); } - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button { - border: none; } - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus { - display: block; - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked='true']):hover ~ .dnb-radio__button { - background-color: var(--color-fire-red-8); } - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked='true'] ~ .dnb-radio__dot { - background-color: var(--color-fire-red); } - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked='true']:hover ~ .dnb-radio__dot { - background-color: var(--color-fire-red-8); } - .dnb-radio > .dnb-form-status { - transform: translateY(0.25rem); - /* 4/16 */ } -" + /* stylelint-enable */ +} +.dnb-radio__dot { + background-color: var(--color-sea-green); + transition: opacity 200ms ease-out, transform 200ms ease-out; +} +.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button { + background-color: var(--color-white); + border-color: var(--color-sea-green); +} +.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot { + opacity: 1; + transform: scale(1); +} +.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot { + opacity: 0; + transform: scale(0.8); +} +.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button { + background-color: var(--color-white); + border-color: var(--color-sea-green); +} +.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button { + border-color: var(--color-sea-green-30); +} +.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button { + border-color: var(--color-mint-green-50); +} +.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot { + background-color: var(--color-sea-green-30); +} +.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button { + border-color: var(--color-mint-green-50); +} +.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button { + background-color: var(--color-mint-green-50); + border-color: transparent; +} +.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot { + background-color: var(--color-mint-green-50); +} +.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button { + background-color: var(--color-mint-green-50); +} +.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot { + background-color: var(--color-mint-green-50); +} +html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button { + background-color: var(--color-mint-green-50); +} +html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button { + border: none; +} +.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus { + display: block; +} +.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button { + background-color: var(--color-mint-green-50); +} +.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button { + border: none; +} +.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus { + display: block; + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button { + background-color: var(--color-fire-red-8); +} +.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot { + background-color: var(--color-fire-red); +} +.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot { + background-color: var(--color-fire-red-8); +} +.dnb-radio > .dnb-form-status { + transform: translateY(0.25rem); /* 4/16 */ +}" `; exports[`Radio scss have to match snapshot 1`] = ` @@ -712,10 +723,16 @@ exports[`Radio scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -726,93 +743,124 @@ exports[`Radio scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Radio component * */ +/* + * Utilities + */ :root { --radio-width--medium: 1.5rem; --radio-height--medium: 1.5rem; @@ -820,140 +868,180 @@ legend.dnb-form-label { --radio-height--large: 2rem; --radio-border-width: 0.125rem; --radio-margin-right: 1rem; - --radio-margin-bottom: 0.5rem; } + --radio-margin-bottom: 0.5rem; +} .dnb-radio { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-radio__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-radio__shell { - position: relative; - user-select: none; - -webkit-user-select: none; - display: flex; - align-items: center; - justify-content: center; - width: var(--radio-width--medium); - height: var(--radio-height--medium); } - .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - position: absolute; - z-index: 4; } - .dnb-radio__button { - border: var(--radio-border-width) solid transparent; } - .dnb-radio__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-radio__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-radio__focus, .dnb-radio__button { - width: calc(var(--radio-width--medium) - 0.25rem); - height: calc(var(--radio-height--medium) - 0.25rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { - width: calc(var(--radio-width--large) - 0.125rem); - height: calc(var(--radio-height--large) - 0.125rem); } - .dnb-radio__dot { - width: calc(var(--radio-width--medium) - 0.75rem); - height: calc(var(--radio-height--medium) - 0.75rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__dot { - width: calc(var(--radio-width--large) - 0.875rem); - height: calc(var(--radio-height--large) - 0.875rem); } - .dnb-radio__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 5; - width: var(--radio-width--medium); - height: var(--radio-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-radio--large .dnb-radio__input { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio__input:not([disabled]) { - cursor: pointer; } - .dnb-radio__order { - display: inline-flex; - align-items: baseline; } - .dnb-radio-group--column .dnb-radio__order { - display: flex; } - .dnb-radio__row { - display: inline-flex; } - .dnb-radio__suffix { - order: 3; } - .dnb-radio__suffix .dnb-modal__trigger { - margin-top: -0.25rem; - margin-bottom: -0.25rem; } - .dnb-radio-group__suffix { - font-size: var(--font-size-basis); } - .dnb-radio--large { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__suffix { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__shell { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio .dnb-form-label { - margin-right: 0; - margin-left: 0; - margin-bottom: 0; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { - order: 2; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { - order: 1; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] + line-height: var(--line-height-basis); +} +.dnb-radio__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-radio__shell { + position: relative; + user-select: none; + -webkit-user-select: none; + display: flex; + align-items: center; + justify-content: center; + width: var(--radio-width--medium); + height: var(--radio-height--medium); +} +.dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { + position: absolute; + z-index: 4; +} +.dnb-radio__button { + border: var(--radio-border-width) solid transparent; +} +.dnb-radio__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-radio__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-radio__focus, .dnb-radio__button { + width: calc(var(--radio-width--medium) - 0.25rem); + height: calc(var(--radio-height--medium) - 0.25rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { + width: calc(var(--radio-width--large) - 0.125rem); + height: calc(var(--radio-height--large) - 0.125rem); +} +.dnb-radio__dot { + width: calc(var(--radio-width--medium) - 0.75rem); + height: calc(var(--radio-height--medium) - 0.75rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__dot { + width: calc(var(--radio-width--large) - 0.875rem); + height: calc(var(--radio-height--large) - 0.875rem); +} +.dnb-radio__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 5; + width: var(--radio-width--medium); + height: var(--radio-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-radio--large .dnb-radio__input { + width: var(--radio-width--large); + height: var(--radio-height--large); +} +.dnb-radio__input:not([disabled]) { + cursor: pointer; +} +.dnb-radio__order { + display: inline-flex; + align-items: baseline; +} +.dnb-radio-group--column .dnb-radio__order { + display: flex; +} +.dnb-radio__row { + display: inline-flex; +} +.dnb-radio__suffix { + order: 3; +} +.dnb-radio__suffix .dnb-modal__trigger { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} +.dnb-radio-group__suffix { + font-size: var(--font-size-basis); +} +.dnb-radio--large { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__suffix { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__shell { + width: var(--radio-width--large); + height: var(--radio-height--large); +} .dnb-radio .dnb-form-label { - margin-top: 0; } - :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { - vertical-align: top; } - .dnb-radio .dnb-form-status { - order: 4; - margin-top: 0.375rem; - /* 6/16 */ - margin-bottom: 0; } - .dnb-radio + .dnb-form-status { - margin-top: 0.5rem; - margin-bottom: 1rem; } - .dnb-radio-group { - display: inline-flex; - flex-direction: row; } - .dnb-radio-group .dnb-radio { - margin-right: var(--radio-margin-right); - margin-bottom: var(--radio-margin-bottom); } - .dnb-radio-group--column .dnb-radio { - display: flex; - margin-right: 0; } - .dnb-radio-group .dnb-radio:last-of-type { - margin-right: 0; } - .dnb-radio-group [role='radiogroup'], .dnb-radio-group__shell { - display: block; } - .dnb-radio-group__shell > .dnb-form-status { - margin-top: 0; - margin-bottom: 0; } - .dnb-radio-group--column .dnb-radio-group__shell { - flex-direction: column; } - .dnb-radio-group .dnb-form-row { - align-items: flex-start; - margin-bottom: calc(1px - 1px - var(--radio-margin-bottom)); } - .dnb-radio-group .dnb-form-row::before { - font-size: var(--font-size-basis); } - .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { - border-color: var(--skeleton-color); } -" + margin-right: 0; + margin-left: 0; + margin-bottom: 0; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { + order: 2; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { + order: 1; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label { + margin-top: 0; +} +:not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { + vertical-align: top; +} +.dnb-radio .dnb-form-status { + order: 4; + margin-top: 0.375rem; /* 6/16 */ + margin-bottom: 0; +} +.dnb-radio + .dnb-form-status { + margin-top: 0.5rem; + margin-bottom: 1rem; +} +.dnb-radio-group { + display: inline-flex; + flex-direction: row; +} +.dnb-radio-group .dnb-radio { + margin-right: var(--radio-margin-right); + margin-bottom: var(--radio-margin-bottom); +} +.dnb-radio-group--column .dnb-radio { + display: flex; + margin-right: 0; +} +.dnb-radio-group .dnb-radio:last-of-type { + margin-right: 0; +} +.dnb-radio-group [role=radiogroup], .dnb-radio-group__shell { + display: block; +} +.dnb-radio-group__shell > .dnb-form-status { + margin-top: 0; + margin-bottom: 0; +} +.dnb-radio-group--column .dnb-radio-group__shell { + flex-direction: column; +} +.dnb-radio-group .dnb-form-row { + align-items: flex-start; + margin-bottom: calc(0px - var(--radio-margin-bottom)); +} +.dnb-radio-group .dnb-form-row::before { + font-size: var(--font-size-basis); +} +.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { + border-color: var(--skeleton-color); +}" `; 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 7e0ace5b764..45bddeb6a40 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 @@ -32,129 +32,126 @@ exports[`Section scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-section--divider { - color: var(--color-black-80); } - .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); } - + color: var(--color-black-80); +} +.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); +} .dnb-section--transparent::after { - color: transparent; } - + color: transparent; +} .dnb-section--mint-green-12 { - color: var(--color-black-80); } - .dnb-section--mint-green-12::after { - color: var(--color-mint-green-12); } - + color: var(--color-black-80); +} +.dnb-section--mint-green-12::after { + color: var(--color-mint-green-12); +} .dnb-section--white { - color: var(--color-black-80); } - .dnb-section--white::after { - color: var(--color-white); } - + color: var(--color-black-80); +} +.dnb-section--white::after { + color: var(--color-white); +} .dnb-section--mint-green { - color: var(--color-black-80); } - .dnb-section--mint-green::after { - color: var(--color-mint-green); } - + color: var(--color-black-80); +} +.dnb-section--mint-green::after { + color: var(--color-mint-green); +} .dnb-section--lavender { - color: var(--color-black-80); } - .dnb-section--lavender::after { - color: var(--color-lavender); } - + color: var(--color-black-80); +} +.dnb-section--lavender::after { + color: var(--color-lavender); +} .dnb-section--sand-yellow { - color: var(--color-black-80); } - .dnb-section--sand-yellow::after { - color: var(--color-sand-yellow); } - + color: var(--color-black-80); +} +.dnb-section--sand-yellow::after { + color: var(--color-sand-yellow); +} .dnb-section--pistachio { - color: var(--color-black-80); } - .dnb-section--pistachio::after { - color: var(--color-pistachio); } - + color: var(--color-black-80); +} +.dnb-section--pistachio::after { + color: var(--color-pistachio); +} .dnb-section--black-3 { - color: var(--color-black-80); } - .dnb-section--black-3::after { - color: var(--color-black-3); } - + color: var(--color-black-80); +} +.dnb-section--black-3::after { + color: var(--color-black-3); +} .dnb-section--emerald-green { - color: var(--color-mint-green); } - .dnb-section--emerald-green::after { - color: var(--color-emerald-green); } - + color: var(--color-mint-green); +} +.dnb-section--emerald-green::after { + color: var(--color-emerald-green); +} .dnb-section--sea-green { - color: var(--color-white); } - .dnb-section--sea-green::after { - color: var(--color-sea-green); } - + color: var(--color-white); +} +.dnb-section--sea-green::after { + color: var(--color-sea-green); +} .dnb-section--fire-red { - color: var(--color-white); } - .dnb-section--fire-red::after { - color: var(--color-fire-red); } - + color: var(--color-white); +} +.dnb-section--fire-red::after { + color: var(--color-fire-red); +} .dnb-section--fire-red-8 { - color: var(--color-black-80); } - .dnb-section--fire-red-8::after { - color: var(--color-fire-red-8); } - -.dnb-section--fire-red .dnb-anchor, -.dnb-section--emerald-green .dnb-anchor, -.dnb-section--sea-green .dnb-anchor { - color: var(--color-white); } - .dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active, - .dnb-section--emerald-green .dnb-anchor:hover, - .dnb-section--emerald-green .dnb-anchor:active, - .dnb-section--sea-green .dnb-anchor:hover, - .dnb-section--sea-green .dnb-anchor:active { - color: var(--color-emerald-green); - background-color: var(--color-white); - text-decoration: none; } - .dnb-section--fire-red .dnb-anchor:active, - .dnb-section--emerald-green .dnb-anchor:active, - .dnb-section--sea-green .dnb-anchor:active { - color: var(--color-emerald-green); - background-color: var(--color-white); } - .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, - .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, - .dnb-section--sea-green .dnb-anchor:not(:disabled):focus { - color: var(--color-white); - background-color: transparent; - outline: none; } - html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-section--sea-green .dnb-anchor:not(:disabled):focus { - --border-color: var(--color-white); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - -.dnb-section--fire-red .dnb-button--tertiary, -.dnb-section--emerald-green .dnb-button--tertiary, -.dnb-section--sea-green .dnb-button--tertiary { - color: var(--color-white); } - .dnb-section--fire-red .dnb-button--tertiary:hover, - .dnb-section--emerald-green .dnb-button--tertiary:hover, - .dnb-section--sea-green .dnb-button--tertiary:hover { - color: var(--color-white); } - .dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text::after, - .dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text::after, - .dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text::after { - color: var(--color-white) !important; } - .dnb-section--fire-red .dnb-button--tertiary:focus, - .dnb-section--emerald-green .dnb-button--tertiary:focus, - .dnb-section--sea-green .dnb-button--tertiary:focus { - color: var(--color-white); } - .dnb-section--fire-red .dnb-button--tertiary:focus::before, - .dnb-section--emerald-green .dnb-button--tertiary:focus::before, - .dnb-section--sea-green .dnb-button--tertiary:focus::before { - outline: none; } - html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard'] - .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard'] - .dnb-section--sea-green .dnb-button--tertiary:focus::before { - --border-color: var(--color-white); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - + color: var(--color-black-80); +} +.dnb-section--fire-red-8::after { + color: var(--color-fire-red-8); +} +.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor { + color: var(--color-white); +} +.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:active { + color: var(--color-emerald-green); + background-color: var(--color-white); + text-decoration: none; +} +.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active { + color: var(--color-emerald-green); + background-color: var(--color-white); +} +.dnb-section--fire-red .dnb-anchor:not(:disabled):focus, .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, .dnb-section--sea-green .dnb-anchor:not(:disabled):focus { + color: var(--color-white); + background-color: transparent; + outline: none; +} +html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus { + --border-color: var(--color-white); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-section--fire-red .dnb-button--tertiary, .dnb-section--emerald-green .dnb-button--tertiary, .dnb-section--sea-green .dnb-button--tertiary { + color: var(--color-white); +} +.dnb-section--fire-red .dnb-button--tertiary:hover, .dnb-section--emerald-green .dnb-button--tertiary:hover, .dnb-section--sea-green .dnb-button--tertiary:hover { + color: var(--color-white); +} +.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text::after, .dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text::after, .dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text::after { + color: var(--color-white) !important; +} +.dnb-section--fire-red .dnb-button--tertiary:focus, .dnb-section--emerald-green .dnb-button--tertiary:focus, .dnb-section--sea-green .dnb-button--tertiary:focus { + color: var(--color-white); +} +.dnb-section--fire-red .dnb-button--tertiary:focus::before, .dnb-section--emerald-green .dnb-button--tertiary:focus::before, .dnb-section--sea-green .dnb-button--tertiary:focus::before { + outline: none; +} +html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus::before { + --border-color: var(--color-white); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} .dnb-section--fire-red ::selection, .dnb-section--mint-green ::selection { - background-color: var(--color-white); } -" + background-color: var(--color-white); +}" `; exports[`Section scss have to match snapshot 1`] = ` @@ -169,47 +166,65 @@ exports[`Section scss have to match snapshot 1`] = ` * Section component * */ +/* + * Utilities + */ .dnb-section { position: relative; - display: flow-root; } - .dnb-section::after { - content: ''; - position: absolute; - z-index: -15; - left: -100vw; - top: 0; - 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; } - .dnb-section .dnb-section::after { - z-index: -14; } - .dnb-section .dnb-section .dnb-section::after { - z-index: -13; } - .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -12; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -11; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -10; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -9; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -8; } - .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { - z-index: -7; } - .dnb-section--spacing-x-small { - padding: var(--spacing-x-small) 0; } - .dnb-section--spacing-small { - padding: var(--spacing-small) 0; } - .dnb-section--spacing-medium { - padding: var(--spacing-medium) 0; } - .dnb-section--spacing-x-large { - padding: var(--spacing-x-large) 0; } - .dnb-section--spacing-xx-large { - padding: var(--spacing-xx-large) 0; } - .dnb-section--spacing, .dnb-section--spacing-large { - padding: var(--spacing-large) 0; } -" + display: flow-root; +} +.dnb-section::after { + content: ""; + position: absolute; + z-index: -15; + left: -100vw; + top: 0; + 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; +} +.dnb-section .dnb-section::after { + z-index: -14; +} +.dnb-section .dnb-section .dnb-section::after { + z-index: -13; +} +.dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -12; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -11; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -10; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -9; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -8; +} +.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after { + z-index: -7; +} +.dnb-section--spacing-x-small { + padding: var(--spacing-x-small) 0; +} +.dnb-section--spacing-small { + padding: var(--spacing-small) 0; +} +.dnb-section--spacing-medium { + padding: var(--spacing-medium) 0; +} +.dnb-section--spacing-x-large { + padding: var(--spacing-x-large) 0; +} +.dnb-section--spacing-xx-large { + padding: var(--spacing-xx-large) 0; +} +.dnb-section--spacing, .dnb-section--spacing-large { + padding: var(--spacing-large) 0; +}" `; 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 2730bb80053..5fe49f0caad 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 @@ -230,25 +230,28 @@ exports[`Skeleton scss have to match snapshot 1`] = ` * Skeleton * */ +/* + * Utilities + */ .dnb-skeleton--block { - display: block; } - + display: block; +} .dnb-skeleton--overflow { - overflow: hidden; } - + overflow: hidden; +} .dnb-skeleton--grey { - filter: grayscale(100%); } - + filter: grayscale(100%); +} .dnb-skeleton--shape { pointer-events: none; position: relative; overflow-x: hidden; color: transparent; background: transparent; - box-shadow: none !important; } - + box-shadow: none !important; +} .dnb-skeleton--shape.dnb-skeleton::before, .dnb-skeleton--shape.dnb-skeleton::after { - content: '' !important; + content: "" !important; position: absolute !important; z-index: 100 !important; left: 0 !important; @@ -261,8 +264,8 @@ exports[`Skeleton scss have to match snapshot 1`] = ` padding: 0 !important; border-radius: inherit; background: none !important; - box-shadow: none !important; } - + box-shadow: none !important; +} .dnb-skeleton--code pre, .dnb-skeleton--code pre *, .dnb-skeleton--code code, @@ -270,77 +273,74 @@ exports[`Skeleton scss have to match snapshot 1`] = ` .dnb-skeleton--font pre *, .dnb-skeleton--font code, .dnb-skeleton--font code * { - --font-family-monospace: 'DNBMonoSkeleton' !important; + --font-family-monospace: "DNBMonoSkeleton" !important; font-family: var(--font-family-monospace) !important; - font-style: unset !important; } - -.dnb-skeleton--font-only, .dnb-skeleton--font, -.dnb-skeleton--font .dnb-skeleton--show-font, -.dnb-skeleton--font .dnb-p { + font-style: unset !important; +} +.dnb-skeleton--font-only, .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p { pointer-events: none; - --font-family-default: 'DNBSkeleton' !important; + --font-family-default: "DNBSkeleton" !important; font-family: var(--font-family-default) !important; - font-style: unset !important; } - -.dnb-skeleton--font, -.dnb-skeleton--font .dnb-skeleton--show-font, -.dnb-skeleton--font .dnb-p { + font-style: unset !important; +} +.dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p { background-position-y: 50% !important; background-repeat: no-repeat !important; 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; } - + -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; +} .dnb-skeleton__figure { position: relative; - border-radius: 0.25rem; } - .dnb-skeleton__figure--circle { - width: 4rem; - height: 4rem; - border-radius: 50%; } - .dnb-skeleton__figure--product { - display: flex; - align-items: center; } - .dnb-skeleton__figure--product .dnb-skeleton__figure--circle + div { - width: 50%; - margin-left: 1rem; } - -.dnb-skeleton--no-animation .dnb-skeleton, -.dnb-skeleton--no-animation .dnb-skeleton::after, -.dnb-skeleton--no-animation * .dnb-skeleton::after { - animation: none !important; } + border-radius: 0.25rem; +} +.dnb-skeleton__figure--circle { + width: 4rem; + height: 4rem; + border-radius: 50%; +} +.dnb-skeleton__figure--product { + display: flex; + align-items: center; +} +.dnb-skeleton__figure--product .dnb-skeleton__figure--circle + div { + width: 50%; + margin-left: 1rem; +} +.dnb-skeleton--no-animation .dnb-skeleton, .dnb-skeleton--no-animation .dnb-skeleton::after, .dnb-skeleton--no-animation * .dnb-skeleton::after { + animation: none !important; +} @font-face { font-family: DNBSkeleton; src: url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; - font-display: fallback; } - + font-display: fallback; +} @font-face { font-family: DNBSkeleton; src: url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; - font-display: fallback; } - + font-display: fallback; +} @font-face { font-family: DNBSkeleton; src: url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("../../assets/fonts/skeleton/DNB-Skeleton-Bold.ttf") format("truetype"); font-weight: 600; font-style: normal; - font-display: fallback; } - + font-display: fallback; +} @font-face { font-family: DNBMonoSkeleton; src: url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; - font-display: fallback; } -" + font-display: fallback; +}" `; 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 3dde87271c9..4f14cec4240 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 @@ -12,14 +12,23 @@ exports[`Slider scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -27,63 +36,81 @@ exports[`Slider scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -94,156 +121,205 @@ exports[`Slider scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -261,7 +337,8 @@ exports[`Slider scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -279,164 +356,339 @@ exports[`Slider scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Tooltip component +* +*/ +/* + * Utilities + */ +.dnb-tooltip { + position: absolute; + z-index: 3100; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} +@keyframes show-tooltip { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes hide-tooltip { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -447,30 +699,130 @@ button.dnb-button::-moz-focus-inner { white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Slider component * */ +/* + * Utilities + */ :root { --slider-track-height: 0.25rem; --slider-thumb-size: 2rem; --slider-button-size: 1.5rem; - --slider-space: 1rem; } + --slider-space: 1rem; +} .dnb-slider { user-select: none; @@ -478,160 +830,194 @@ legend.dnb-form-label { -webkit-touch-callout: none; display: flex; font-size: var(--font-size-small); - line-height: var(--slider-thumb-size); } - .dnb-slider--stretch { - width: 100%; } - .dnb-slider--vertical { + line-height: var(--slider-thumb-size); +} +.dnb-slider--stretch { + width: 100%; +} +.dnb-slider--vertical { + display: flex; + width: auto; + height: 100%; + min-width: inherit; + min-height: inherit; +} +.dnb-slider__wrapper { + display: inline-flex; + flex-direction: column; + flex: 1; + width: 100%; +} +.dnb-slider--vertical .dnb-slider__wrapper { + align-items: center; + width: auto; + height: 100%; +} +.dnb-slider__inner { + display: inline-flex; + height: var(--slider-thumb-size); +} +.dnb-slider__suffix { + align-self: center; +} +.dnb-slider--vertical .dnb-slider__suffix { + padding-left: 0; + padding-top: 0.5rem; +} +.dnb-slider__track { + touch-action: none; + position: relative; + flex: 1; + margin: 0 calc(var(--slider-space) * 1.5); + min-width: 2rem; + cursor: pointer; +} +.dnb-slider--vertical .dnb-slider__track { + margin: calc(var(--slider-space) * 1.5) 0; + min-height: 2rem; + min-width: auto; +} +.dnb-slider--no-buttons .dnb-slider__track { + margin: 0 calc(var(--slider-space)); +} +.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track { + margin: calc(var(--slider-space)) 0; +} +.dnb-slider--vertical .dnb-slider__inner { + flex-direction: column; + width: var(--slider-thumb-size); + height: inherit; + min-width: inherit; + min-height: inherit; +} +.dnb-slider__line { + position: absolute; + left: 0; + top: 50%; + margin: 0 calc(0px - var(--slider-space)); + height: var(--slider-track-height); + transform: translate3d(0, -50%, 0); + background-color: grey; + border-radius: var(--slider-track-height); +} +.dnb-slider--vertical .dnb-slider__line { + width: var(--slider-track-height); + height: auto; + left: 50%; + top: 0; + margin: calc(0px - var(--slider-space)) 0; + transform: translate3d(-50%, 0, 0); +} +.dnb-slider__line__before { + z-index: 2; +} +.dnb-slider__line__after { + z-index: 1; + right: 0; + background-color: #ddd; +} +.dnb-slider--vertical .dnb-slider__line__before { + top: 0; + bottom: 0; +} +.dnb-slider--vertical .dnb-slider__line__after { + bottom: 0; +} +.dnb-slider__button-helper, .dnb-slider__thumb { + position: absolute; + left: 0; + top: 0; + z-index: 3; + display: flex; + justify-content: center; + transform: translate3d(-50%, 0, 0); + border-radius: 50%; +} +.dnb-slider__button-helper, +.dnb-slider__button-helper .dnb-button, .dnb-slider__thumb, +.dnb-slider__thumb .dnb-button { + height: var(--slider-thumb-size); + width: var(--slider-thumb-size); +} +.dnb-slider--vertical .dnb-slider__thumb { + transform: translate3d(0, -50%, 0); +} +.dnb-slider__button.dnb-button--size-small { + height: var(--slider-button-size); + width: var(--slider-button-size); + line-height: var(--slider-button-size); + transform: translateY(0.25rem); + z-index: 2; +} +.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small { + transform: translateX(0.25rem); +} +.dnb-slider__state--disabled .dnb-slider__track, .dnb-slider__state--disabled .dnb-slider__thumb, .dnb-slider__state--disabled .dnb-slider__line { + cursor: not-allowed; +} +.dnb-slider__state--animate .dnb-slider__thumb, .dnb-slider__state--animate .dnb-slider__line { + transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), box-shadow 250ms var(--easing-default); +} +html[data-visual-test] .dnb-slider__thumb, html[data-visual-test] .dnb-slider__line { + transition: none !important; +} +.dnb-slider__button-helper { + pointer-events: none; + z-index: 2; + opacity: 0; + transform: translate3d(0.0625rem, 0, 0); +} +.dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button { + outline: none; +} +html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-slider > .dnb-form-label { + align-self: flex-start; + margin-right: 1rem; + line-height: var(--slider-thumb-size); +} +.dnb-slider > .dnb-form-label--vertical { + margin-right: 0; + line-height: var(--line-height-basis); +} +.dnb-slider__label--vertical { + flex-direction: column; +} +.dnb-slider__label--vertical.dnb-slider--vertical { + align-items: center; +} +.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label { + text-align: center; + width: 100%; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-slider .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-slider--vertical .dnb-form-status { + margin-top: 1rem; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-slider { display: flex; - width: auto; - height: 100%; - min-width: inherit; - min-height: inherit; } - .dnb-slider__wrapper { - display: inline-flex; - flex-direction: column; - flex: 1; - width: 100%; } - .dnb-slider--vertical .dnb-slider__wrapper { - align-items: center; - width: auto; - height: 100%; } - .dnb-slider__inner { - display: inline-flex; - height: var(--slider-thumb-size); } - .dnb-slider__suffix { - align-self: center; } - .dnb-slider--vertical .dnb-slider__suffix { - padding-left: 0; - padding-top: 0.5rem; } - .dnb-slider__track { - touch-action: none; - position: relative; - flex: 1; - margin: 0 calc(var(--slider-space) * 1.5); - min-width: 2rem; - cursor: pointer; } - .dnb-slider--vertical .dnb-slider__track { - margin: calc(var(--slider-space) * 1.5) 0; - min-height: 2rem; - min-width: auto; } - .dnb-slider--no-buttons .dnb-slider__track { - margin: 0 calc(var(--slider-space)); } - .dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track { - margin: calc(var(--slider-space)) 0; } - .dnb-slider--vertical .dnb-slider__inner { flex-direction: column; - width: var(--slider-thumb-size); - height: inherit; - min-width: inherit; - min-height: inherit; } - .dnb-slider__line { - position: absolute; - left: 0; - top: 50%; - margin: 0 calc(1px - 1px - var(--slider-space)); - height: var(--slider-track-height); - transform: translate3d(0, -50%, 0); - background-color: grey; - border-radius: var(--slider-track-height); } - .dnb-slider--vertical .dnb-slider__line { - width: var(--slider-track-height); - height: auto; - left: 50%; - top: 0; - margin: calc(1px - 1px - var(--slider-space)) 0; - transform: translate3d(-50%, 0, 0); } - .dnb-slider__line__before { - z-index: 2; } - .dnb-slider__line__after { - z-index: 1; - right: 0; - background-color: #ddd; } - .dnb-slider--vertical .dnb-slider__line__before { - top: 0; - bottom: 0; } - .dnb-slider--vertical .dnb-slider__line__after { - bottom: 0; } - .dnb-slider__button-helper, .dnb-slider__thumb { - position: absolute; - left: 0; - top: 0; - z-index: 3; - display: flex; - justify-content: center; - transform: translate3d(-50%, 0, 0); - border-radius: 50%; } - .dnb-slider__button-helper, - .dnb-slider__button-helper .dnb-button, .dnb-slider__thumb, - .dnb-slider__thumb .dnb-button { - height: var(--slider-thumb-size); - width: var(--slider-thumb-size); } - .dnb-slider--vertical .dnb-slider__thumb { - transform: translate3d(0, -50%, 0); } - .dnb-slider__button.dnb-button--size-small { - height: var(--slider-button-size); - width: var(--slider-button-size); - line-height: var(--slider-button-size); - transform: translateY(0.25rem); - z-index: 2; } - .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small { - transform: translateX(0.25rem); } - .dnb-slider__state--disabled .dnb-slider__track, - .dnb-slider__state--disabled .dnb-slider__thumb, - .dnb-slider__state--disabled .dnb-slider__line { - cursor: not-allowed; } - .dnb-slider__state--animate .dnb-slider__thumb, - .dnb-slider__state--animate .dnb-slider__line { - transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), box-shadow 250ms var(--easing-default); } - html[data-visual-test] .dnb-slider__thumb, - html[data-visual-test] .dnb-slider__line { - transition: none !important; } - .dnb-slider__button-helper { - pointer-events: none; - z-index: 2; - opacity: 0; - transform: translate3d(0.0625rem, 0, 0); } - .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button { - outline: none; } - html[data-whatinput='keyboard'] .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-slider > .dnb-form-label { - align-self: flex-start; - margin-right: 1rem; - line-height: var(--slider-thumb-size); } - .dnb-slider > .dnb-form-label--vertical { - margin-right: 0; - line-height: var(--line-height-basis); } - .dnb-slider__label--vertical { - flex-direction: column; } - .dnb-slider__label--vertical.dnb-slider--vertical { - align-items: center; } - .dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label { - text-align: center; - width: 100%; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-slider .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-slider--vertical .dnb-form-status { - margin-top: 1rem; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-slider { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-slider > .dnb-form-label { - margin-bottom: 0.5rem; } } - .dnb-slider.dnb-skeleton .dnb-slider__line, - .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line { - background-color: var(--skeleton-color); } - .dnb-slider.dnb-skeleton .dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__track::after, - .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, - .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after { - background-color: var(--skeleton-color); } -" + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-slider > .dnb-form-label { + margin-bottom: 0.5rem; + } +} +.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line { + background-color: var(--skeleton-color); +} +.dnb-slider.dnb-skeleton .dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__track::after, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after { + background-color: var(--skeleton-color); +}" `; diff --git a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap index 59c548c5a2d..d74139498ee 100644 --- a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap @@ -35,8 +35,7 @@ exports[`Space scss have to match default theme snapshot 1`] = ` "/* * Np theme is provided * - */ -" + */" `; exports[`Space scss have to match snapshot 1`] = ` @@ -53,550 +52,555 @@ exports[`Space scss have to match snapshot 1`] = ` * TODO: Set spacing in the theme file, as theme comes later in the stack * */ +/* + * Utilities + */ /** NB: Because CSS specificity ".dnb-core-style .dnb-space" has to come before the next ".dnb-space" */ .dnb-core-style .dnb-space__top--zero { - margin-top: 0; } - + margin-top: 0; +} .dnb-core-style .dnb-space__top--xx-small { - margin-top: var(--spacing-xx-small); } - + margin-top: var(--spacing-xx-small); +} .dnb-core-style .dnb-space__top--x-small { - margin-top: var(--spacing-x-small); } - + margin-top: var(--spacing-x-small); +} .dnb-core-style .dnb-space__top--small { - margin-top: var(--spacing-small); } - + margin-top: var(--spacing-small); +} .dnb-core-style .dnb-space__top--medium { - margin-top: var(--spacing-medium); } - + margin-top: var(--spacing-medium); +} .dnb-core-style .dnb-space__top--large { - margin-top: var(--spacing-large); } - + margin-top: var(--spacing-large); +} .dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small { - margin-top: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-top: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__top--x-large { - margin-top: var(--spacing-x-large); } - + margin-top: var(--spacing-x-large); +} .dnb-core-style .dnb-space__top--xx-large { - margin-top: var(--spacing-xx-large); } - + margin-top: var(--spacing-xx-large); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small { - margin-top: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2 { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large { - margin-top: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__right--zero { - margin-right: 0; } - + margin-right: 0; +} .dnb-core-style .dnb-space__right--xx-small { - margin-right: var(--spacing-xx-small); } - + margin-right: var(--spacing-xx-small); +} .dnb-core-style .dnb-space__right--x-small { - margin-right: var(--spacing-x-small); } - + margin-right: var(--spacing-x-small); +} .dnb-core-style .dnb-space__right--small { - margin-right: var(--spacing-small); } - + margin-right: var(--spacing-small); +} .dnb-core-style .dnb-space__right--medium { - margin-right: var(--spacing-medium); } - + margin-right: var(--spacing-medium); +} .dnb-core-style .dnb-space__right--large { - margin-right: var(--spacing-large); } - + margin-right: var(--spacing-large); +} .dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small { - margin-right: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-right: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__right--x-large { - margin-right: var(--spacing-x-large); } - + margin-right: var(--spacing-x-large); +} .dnb-core-style .dnb-space__right--xx-large { - margin-right: var(--spacing-xx-large); } - + margin-right: var(--spacing-xx-large); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small { - margin-right: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2 { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large { - margin-right: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__bottom--zero { - margin-bottom: 0; } - + margin-bottom: 0; +} .dnb-core-style .dnb-space__bottom--xx-small { - margin-bottom: var(--spacing-xx-small); } - + margin-bottom: var(--spacing-xx-small); +} .dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: var(--spacing-x-small); } - + margin-bottom: var(--spacing-x-small); +} .dnb-core-style .dnb-space__bottom--small { - margin-bottom: var(--spacing-small); } - + margin-bottom: var(--spacing-small); +} .dnb-core-style .dnb-space__bottom--medium { - margin-bottom: var(--spacing-medium); } - + margin-bottom: var(--spacing-medium); +} .dnb-core-style .dnb-space__bottom--large { - margin-bottom: var(--spacing-large); } - + margin-bottom: var(--spacing-large); +} .dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-bottom: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__bottom--x-large { - margin-bottom: var(--spacing-x-large); } - + margin-bottom: var(--spacing-x-large); +} .dnb-core-style .dnb-space__bottom--xx-large { - margin-bottom: var(--spacing-xx-large); } - + margin-bottom: var(--spacing-xx-large); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2 { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__left--zero { - margin-left: 0; } - + margin-left: 0; +} .dnb-core-style .dnb-space__left--xx-small { - margin-left: var(--spacing-xx-small); } - + margin-left: var(--spacing-xx-small); +} .dnb-core-style .dnb-space__left--x-small { - margin-left: var(--spacing-x-small); } - + margin-left: var(--spacing-x-small); +} .dnb-core-style .dnb-space__left--small { - margin-left: var(--spacing-small); } - + margin-left: var(--spacing-small); +} .dnb-core-style .dnb-space__left--medium { - margin-left: var(--spacing-medium); } - + margin-left: var(--spacing-medium); +} .dnb-core-style .dnb-space__left--large { - margin-left: var(--spacing-large); } - + margin-left: var(--spacing-large); +} .dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small { - margin-left: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-left: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__left--x-large { - margin-left: var(--spacing-x-large); } - + margin-left: var(--spacing-x-large); +} .dnb-core-style .dnb-space__left--xx-large { - margin-left: var(--spacing-xx-large); } - + margin-left: var(--spacing-xx-large); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small { - margin-left: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2 { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large { - margin-left: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } + margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} /* stylelint-disable */ .dnb-space--no-collapse { - display: flow-root; } - + display: flow-root; +} .dnb-space--stretch { - width: 100%; } - + width: 100%; +} .dnb-space--inline { - display: inline-block; } - + display: inline-block; +} .dnb-space__top--zero { - margin-top: 0; } - + margin-top: 0; +} .dnb-space__top--xx-small { - margin-top: var(--spacing-xx-small); } - + margin-top: var(--spacing-xx-small); +} .dnb-space__top--x-small { - margin-top: var(--spacing-x-small); } - + margin-top: var(--spacing-x-small); +} .dnb-space__top--small { - margin-top: var(--spacing-small); } - + margin-top: var(--spacing-small); +} .dnb-space__top--medium { - margin-top: var(--spacing-medium); } - + margin-top: var(--spacing-medium); +} .dnb-space__top--large { - margin-top: var(--spacing-large); } - + margin-top: var(--spacing-large); +} .dnb-space__top--large.dnb-space__top--x-small { - margin-top: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-top: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__top--x-large { - margin-top: var(--spacing-x-large); } - + margin-top: var(--spacing-x-large); +} .dnb-space__top--xx-large { - margin-top: var(--spacing-xx-large); } - + margin-top: var(--spacing-xx-large); +} .dnb-space__top--xx-large.dnb-space__top--x-small { - margin-top: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-space__top--xx-large.dnb-space__top--small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-space__top--xx-large.dnb-space__top--medium { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__top--xx-large.dnb-space__top--large { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-space__top--xx-large.dnb-space__top--x-large { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__top--xx-large-x2 { - margin-top: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--x-small { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--small { - margin-top: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--medium { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--large { - margin-top: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__top--xx-large-x2.dnb-space__top--x-large { - margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-top: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__right--zero { - margin-right: 0; } - + margin-right: 0; +} .dnb-space__right--xx-small { - margin-right: var(--spacing-xx-small); } - + margin-right: var(--spacing-xx-small); +} .dnb-space__right--x-small { - margin-right: var(--spacing-x-small); } - + margin-right: var(--spacing-x-small); +} .dnb-space__right--small { - margin-right: var(--spacing-small); } - + margin-right: var(--spacing-small); +} .dnb-space__right--medium { - margin-right: var(--spacing-medium); } - + margin-right: var(--spacing-medium); +} .dnb-space__right--large { - margin-right: var(--spacing-large); } - + margin-right: var(--spacing-large); +} .dnb-space__right--large.dnb-space__right--x-small { - margin-right: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-right: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__right--x-large { - margin-right: var(--spacing-x-large); } - + margin-right: var(--spacing-x-large); +} .dnb-space__right--xx-large { - margin-right: var(--spacing-xx-large); } - + margin-right: var(--spacing-xx-large); +} .dnb-space__right--xx-large.dnb-space__right--x-small { - margin-right: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-space__right--xx-large.dnb-space__right--small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-space__right--xx-large.dnb-space__right--medium { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__right--xx-large.dnb-space__right--large { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-space__right--xx-large.dnb-space__right--x-large { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__right--xx-large-x2 { - margin-right: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--x-small { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--small { - margin-right: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--medium { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--large { - margin-right: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__right--xx-large-x2.dnb-space__right--x-large { - margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-right: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__bottom--zero { - margin-bottom: 0; } - + margin-bottom: 0; +} .dnb-space__bottom--xx-small { - margin-bottom: var(--spacing-xx-small); } - + margin-bottom: var(--spacing-xx-small); +} .dnb-space__bottom--x-small { - margin-bottom: var(--spacing-x-small); } - + margin-bottom: var(--spacing-x-small); +} .dnb-space__bottom--small { - margin-bottom: var(--spacing-small); } - + margin-bottom: var(--spacing-small); +} .dnb-space__bottom--medium { - margin-bottom: var(--spacing-medium); } - + margin-bottom: var(--spacing-medium); +} .dnb-space__bottom--large { - margin-bottom: var(--spacing-large); } - + margin-bottom: var(--spacing-large); +} .dnb-space__bottom--large.dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-bottom: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__bottom--x-large { - margin-bottom: var(--spacing-x-large); } - + margin-bottom: var(--spacing-x-large); +} .dnb-space__bottom--xx-large { - margin-bottom: var(--spacing-xx-large); } - + margin-bottom: var(--spacing-xx-large); +} .dnb-space__bottom--xx-large.dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large.dnb-space__bottom--small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-space__bottom--xx-large.dnb-space__bottom--medium { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large.dnb-space__bottom--large { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-space__bottom--xx-large.dnb-space__bottom--x-large { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__bottom--xx-large-x2 { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--small { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--large { - margin-bottom: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large { - margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__left--zero { - margin-left: 0; } - + margin-left: 0; +} .dnb-space__left--xx-small { - margin-left: var(--spacing-xx-small); } - + margin-left: var(--spacing-xx-small); +} .dnb-space__left--x-small { - margin-left: var(--spacing-x-small); } - + margin-left: var(--spacing-x-small); +} .dnb-space__left--small { - margin-left: var(--spacing-small); } - + margin-left: var(--spacing-small); +} .dnb-space__left--medium { - margin-left: var(--spacing-medium); } - + margin-left: var(--spacing-medium); +} .dnb-space__left--large { - margin-left: var(--spacing-large); } - + margin-left: var(--spacing-large); +} .dnb-space__left--large.dnb-space__left--x-small { - margin-left: calc( var(--spacing-large) + var(--spacing-x-small)); } - + margin-left: calc(var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__left--x-large { - margin-left: var(--spacing-x-large); } - + margin-left: var(--spacing-x-large); +} .dnb-space__left--xx-large { - margin-left: var(--spacing-xx-large); } - + margin-left: var(--spacing-xx-large); +} .dnb-space__left--xx-large.dnb-space__left--x-small { - margin-left: calc( var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-large) + var(--spacing-large)); +} .dnb-space__left--xx-large.dnb-space__left--small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-medium)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-medium)); +} .dnb-space__left--xx-large.dnb-space__left--medium { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__left--xx-large.dnb-space__left--large { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small)); +} .dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small)); +} .dnb-space__left--xx-large.dnb-space__left--x-large { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large)); +} .dnb-space__left--xx-large-x2 { - margin-left: calc( var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--x-small { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--small { - margin-left: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--medium { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--large { - margin-left: calc( var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); } - + margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large)); +} .dnb-space__left--xx-large-x2.dnb-space__left--x-large { - margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); } + margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); +} span.dnb-space--no-collapse > span { - display: block; } + display: block; +} -/* stylelint-enable */ -" +/* stylelint-enable */" `; 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 86cf1090608..fd38e7ee987 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 @@ -8030,81 +8030,93 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` box-shadow: inset 0 0 0 0.125rem var(--border-color); /* iOS fix - because "inset" works not fine with border-radius */ /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} .dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button { - background-color: var(--color-pistachio); } - + background-color: var(--color-pistachio); +} .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button { cursor: text; pointer-events: initial; - user-select: initial; } + user-select: initial; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { + color: var(--color-black-80); + background-color: var(--color-white); + --border-color: var(--color-black-20); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - color: var(--color-black-80); - background-color: var(--color-white); - --border-color: var(--color-black-20); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { --border-color: var(--color-black-80); box-shadow: inset 0 0 0 0.125rem var(--border-color); /* iOS fix - because "inset" works not fine with border-radius */ /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - 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 { + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { + 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 { color: var(--color-emerald-green); - background-color: var(--color-mint-green); } - + background-color: var(--color-mint-green); +} .dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p { font-size: var(--font-size-small); - margin-bottom: 0.5rem; } - + margin-bottom: 0.5rem; +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary { - background-color: var(--color-sand-yellow); } - + background-color: var(--color-sand-yellow); +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary { - background-color: var(--color-fire-red-8); } - + background-color: var(--color-fire-red-8); +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary { - background-color: var(--color-pistachio); } - + background-color: var(--color-pistachio); +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon { align-self: flex-start; margin-top: 1rem; - margin-right: 0.75rem; } - + margin-right: 0.75rem; +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { - font-weight: var(--font-weight-basis); } - + font-weight: var(--font-weight-basis); +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { margin-top: 0.5rem; font-size: var(--font-size-x-small); line-height: var(--font-size-basis); - color: var(--color-black-80); } -" + color: var(--color-black-80); +}" `; exports[`StepIndicator scss have to match snapshot 1`] = ` @@ -8119,14 +8131,23 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -8134,63 +8155,81 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -8201,156 +8240,205 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -8368,7 +8456,8 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -8386,232 +8475,286 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * StepIndicator component * */ +/* + * Utilities + */ @media screen and (min-width: 50.1em) { .dnb-step-indicator__sidebar { max-width: 20rem; - margin-right: var(--spacing-x-large); } - .dnb-step-indicator__sidebar .dnb-step-indicator__item { - min-width: 320px; } } - + margin-right: var(--spacing-x-large); + } + .dnb-step-indicator__sidebar .dnb-step-indicator__item { + min-width: 320px; + } +} @media screen and (max-width: 50.1em) { .dnb-step-indicator__sidebar--ssr-skeleton { visibility: hidden; overflow: hidden; width: 0; - height: 5.5rem; } } + height: 5.5rem; + } +} .dnb-step-indicator-wrapper .dnb-step-indicator__list { display: flex; flex-direction: column; padding: 0; margin: 0; - list-style: none; } - + list-style: none; +} .dnb-step-indicator-wrapper .dnb-step-indicator__trigger { display: flex; - flex-direction: column; } - -.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, -.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button { + flex-direction: column; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button { overflow: hidden; justify-content: space-between; border-radius: 0.25rem; will-change: height; - transition: height 400ms var(--easing-default); } - .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, - .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text { - text-align: left; } - .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text, - .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text { - margin-right: 1rem; } - .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, - .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment { - order: 2; } - html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] - .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button { - transition-duration: 1ms !important; } - + transition: height 400ms var(--easing-default); +} +.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text { + text-align: left; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text { + margin-right: 1rem; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment { + order: 2; +} +html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button { + transition-duration: 1ms !important; +} .dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button { - margin-top: 0.5rem; } - + margin-top: 0.5rem; +} .dnb-step-indicator-wrapper .dnb-step-indicator__item { - margin-bottom: 1rem; } - .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon { - opacity: 1; - transition: opacity 1400ms ease-in-out; } - html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon { - transition-duration: 1ms !important; } - .dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) -.dnb-button__icon { - opacity: 0; } - + margin-bottom: 1rem; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon { + opacity: 1; + transition: opacity 1400ms ease-in-out; +} +html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button__icon { + transition-duration: 1ms !important; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon { + opacity: 0; +} .dnb-step-indicator-wrapper .dnb-step-indicator__item-content { display: flex; flex-wrap: nowrap; - padding: 0.5rem 0; } - .dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number { - padding-right: 0.5rem; - white-space: nowrap; } - .dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper { - display: flex; - flex-direction: column; } - + padding: 0.5rem 0; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__number { + padding-right: 0.5rem; + white-space: nowrap; +} +.dnb-step-indicator-wrapper .dnb-step-indicator__item-content__wrapper { + display: flex; + flex-direction: column; +} .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status { color: var(--color-black-80); - font-size: var(--font-size-x-small); } -" + font-size: var(--font-size-x-small); +}" `; 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 34a8057d1be..915aff50ef4 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 @@ -225,103 +225,130 @@ exports[`Switch scss have to match default theme snapshot 1`] = ` * On error state * */ - /* stylelint-disable-next-line */ } - .dnb-switch__background { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - overflow: hidden; - background-color: var(--color-sea-green-30); } - .dnb-switch__background::after { - content: ''; - position: absolute; - transition: transform 0.3s ease-out, position 0.3s ease-out; } - .dnb-switch__input:not(:checked) ~ .dnb-switch__button { - background-color: var(--color-white); - border-color: var(--color-sea-green); } - .dnb-switch__input:checked ~ .dnb-switch__button { - background-color: var(--color-sea-green); } - .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after { - right: 0; - transform: translateX(calc(var(--switch-width--medium) - 2.8rem)); - width: 0.5rem; - height: 0.5rem; - border-radius: 50%; - border: 0.0625rem solid var(--color-sea-green); } - .dnb-switch__input:checked ~ .dnb-switch__background::after { - left: 0; - transform: translateX(calc(var(--switch-width--medium) - 1.87rem)); - width: 0.0625rem; - height: 0.5rem; - border-radius: 0.0625rem; - background-color: var(--color-sea-green); } - .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after { - width: 0.625rem; - height: 0.625rem; - transform: translateX(calc(var(--switch-width--large) - 3.7rem)); } - .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after { - height: 0.625rem; - transform: translateX(calc(var(--switch-width--large) - 2.5rem)); } - .dnb-switch__input[disabled] ~ .dnb-switch__background { - background-color: var(--color-mint-green-25); } - .dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after { - background-color: var(--color-sea-green-30); } - .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after { - border-color: var(--color-sea-green-30); } - .dnb-switch__input[disabled] ~ .dnb-switch__button { - border-color: var(--color-sea-green-30); } - .dnb-switch__input[disabled]:checked ~ .dnb-switch__button { - background-color: var(--color-sea-green-30); } - html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button { - border: none; } - html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button { - background-color: var(--color-mint-green-50); } - .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, - .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background { - outline: none; } - html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard'] - .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, - .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus { - display: block; } - .dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus { - transform: rotate(180deg); } - .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button { - border-color: var(--color-sea-green); - background-color: var(--color-mint-green-50); } - .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button { - background-color: var(--color-mint-green-50); - border-color: transparent; } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button { - border-color: var(--color-fire-red); - background-color: var(--color-fire-red-8); } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button { - border-color: var(--color-fire-red-8); } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button { - background-color: var(--color-fire-red); } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background { - background-color: var(--color-fire-red-8); - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after { - background-color: var(--color-fire-red); } - .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after { - border-color: var(--color-fire-red); } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus { - display: block; - --border-color: var(--color-fire-red); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus { - transform: rotate(180deg); } - .dnb-switch > .dnb-form-status { - transform: translateY(0.1875rem); } -" + /* stylelint-disable-next-line */ +} +.dnb-switch__background { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + overflow: hidden; + background-color: var(--color-sea-green-30); +} +.dnb-switch__background::after { + content: ""; + position: absolute; + transition: transform 0.3s ease-out, position 0.3s ease-out; +} +.dnb-switch__input:not(:checked) ~ .dnb-switch__button { + background-color: var(--color-white); + border-color: var(--color-sea-green); +} +.dnb-switch__input:checked ~ .dnb-switch__button { + background-color: var(--color-sea-green); +} +.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after { + right: 0; + transform: translateX(calc(var(--switch-width--medium) - 2.8rem)); + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + border: 0.0625rem solid var(--color-sea-green); +} +.dnb-switch__input:checked ~ .dnb-switch__background::after { + left: 0; + transform: translateX(calc(var(--switch-width--medium) - 1.87rem)); + width: 0.0625rem; + height: 0.5rem; + border-radius: 0.0625rem; + background-color: var(--color-sea-green); +} +.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after { + width: 0.625rem; + height: 0.625rem; + transform: translateX(calc(var(--switch-width--large) - 3.7rem)); +} +.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after { + height: 0.625rem; + transform: translateX(calc(var(--switch-width--large) - 2.5rem)); +} +.dnb-switch__input[disabled] ~ .dnb-switch__background { + background-color: var(--color-mint-green-25); +} +.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after { + background-color: var(--color-sea-green-30); +} +.dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after { + border-color: var(--color-sea-green-30); +} +.dnb-switch__input[disabled] ~ .dnb-switch__button { + border-color: var(--color-sea-green-30); +} +.dnb-switch__input[disabled]:checked ~ .dnb-switch__button { + background-color: var(--color-sea-green-30); +} +html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button { + border: none; +} +html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button { + background-color: var(--color-mint-green-50); +} +.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background { + outline: none; +} +html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus { + display: block; +} +.dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus { + transform: rotate(180deg); +} +.dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button { + border-color: var(--color-sea-green); + background-color: var(--color-mint-green-50); +} +.dnb-switch__input:not([disabled]):active ~ .dnb-switch__button { + background-color: var(--color-mint-green-50); + border-color: transparent; +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button { + border-color: var(--color-fire-red); + background-color: var(--color-fire-red-8); +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button { + border-color: var(--color-fire-red-8); +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button { + background-color: var(--color-fire-red); +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background { + background-color: var(--color-fire-red-8); + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after { + background-color: var(--color-fire-red); +} +.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after { + border-color: var(--color-fire-red); +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus { + display: block; + --border-color: var(--color-fire-red); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus { + transform: rotate(180deg); +} +.dnb-switch > .dnb-form-status { + transform: translateY(0.1875rem); +}" `; exports[`Switch scss have to match snapshot 1`] = ` @@ -336,10 +363,16 @@ exports[`Switch scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -350,100 +383,132 @@ exports[`Switch scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Switch component * */ +/* + * Utilities + */ :root { --switch-width--medium: 2.5rem; --switch-height--medium: 1.5rem; --switch-width--large: 3.25rem; --switch-height--large: 2rem; --switch-border-width--medium: 0.0625rem; - --switch-border-width--large: 0.125rem; } + --switch-border-width--large: 0.125rem; +} .dnb-switch { display: inline-flex; @@ -457,128 +522,162 @@ legend.dnb-form-label { /* * When switched ON * aka when the switch is :checked - */ } - .dnb-switch__inner { - display: inline-flex; - flex-direction: column; - justify-content: center; - font-size: var(--font-size-basis); } - .dnb-switch__shell { - user-select: none; - -webkit-user-select: none; - position: relative; - display: flex; - align-items: center; } - .dnb-switch--large { - line-height: var(--switch-height--large); } - .dnb-switch--large .dnb-switch__shell { - height: var(--switch-height--large); } - .dnb-switch__row { - display: inline-flex; - align-items: center; - height: var(--switch-height--medium); } - .dnb-switch__focus, .dnb-switch__button { - position: absolute; - z-index: 4; - border-radius: 50%; } - .dnb-switch__button { - left: 0; - width: var(--switch-height--medium); - height: var(--switch-height--medium); - transform: translateX(0); - transition: transform 160ms ease-out 125ms; - border: var(--switch-border-width--medium) solid transparent; } - .dnb-switch--large .dnb-switch__button { - width: var(--switch-height--large); - height: var(--switch-height--large); - border-width: var(--switch-border-width--large); } - .dnb-switch__focus { - display: none; - position: absolute; - z-index: 2; - width: 100%; - height: 100%; - transition: transform 150ms ease-out; - transform: rotate(0deg); - clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%); - outline: none; } - html[data-whatinput='keyboard'] .dnb-switch__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } + */ +} +.dnb-switch__inner { + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: var(--font-size-basis); +} +.dnb-switch__shell { + user-select: none; + -webkit-user-select: none; + position: relative; + display: flex; + align-items: center; +} +.dnb-switch--large { + line-height: var(--switch-height--large); +} +.dnb-switch--large .dnb-switch__shell { + height: var(--switch-height--large); +} +.dnb-switch__row { + display: inline-flex; + align-items: center; + height: var(--switch-height--medium); +} +.dnb-switch__focus, .dnb-switch__button { + position: absolute; + z-index: 4; + border-radius: 50%; +} +.dnb-switch__button { + left: 0; + width: var(--switch-height--medium); + height: var(--switch-height--medium); + transform: translateX(0); + transition: transform 160ms ease-out 125ms; + border: var(--switch-border-width--medium) solid transparent; +} +.dnb-switch--large .dnb-switch__button { + width: var(--switch-height--large); + height: var(--switch-height--large); + border-width: var(--switch-border-width--large); +} +.dnb-switch__focus { + display: none; + position: absolute; + z-index: 2; + width: 100%; + height: 100%; + transition: transform 150ms ease-out; + transform: rotate(0deg); + clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%); + outline: none; +} +html[data-whatinput=keyboard] .dnb-switch__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-switch__input:not(:checked) ~ .dnb-switch__button { + transform: translateX(0); + transform: translateX(calc(0px - var(--switch-border-width--medium))); +} +.dnb-switch__input:checked ~ .dnb-switch__button { + transform: translateX(1rem); + transform: translateX(calc(var(--switch-width--medium) - 1.5rem + var(--switch-border-width--medium))); +} +.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button { + transform: translateX(calc(0px - var(--switch-border-width--large))); +} +.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button { + transform: translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large))); +} +.dnb-switch__background { + width: var(--switch-width--medium); + height: calc(var(--switch-height--medium) - 0.5rem); + border-radius: calc(var(--switch-height--medium) - 0.25rem); +} +.dnb-switch--large .dnb-switch__background { + width: var(--switch-width--large); + height: calc(var(--switch-height--large) - 0.75rem); + border-radius: calc(var(--switch-height--large) - 0.375rem); +} +.dnb-switch__input { + opacity: 0; + position: absolute; + left: 0; + right: 0; + z-index: 5; + display: block; + width: var(--switch-width--medium); + height: var(--switch-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-switch--large .dnb-switch__input { + width: var(--switch-width--large); + height: var(--switch-height--large); +} +.dnb-switch__input:not([disabled]) { + cursor: pointer; +} +.dnb-switch .dnb-form-label { + padding-right: 0.5rem; + margin-right: 0; + margin-left: 0; + margin-bottom: 0; +} +.dnb-switch__order { + display: inline-flex; +} +.dnb-switch__suffix { + order: 4; +} +.dnb-switch--label-position-left .dnb-switch__suffix { + padding-left: 1rem; +} +.dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner { + order: 2; +} +.dnb-switch--label-position-left .dnb-switch__order .dnb-form-label { + order: 1; + align-self: flex-start; +} +.dnb-switch--label-position-left .dnb-switch__order .dnb-form-status { + order: 3; + margin-top: 0.5rem; +} +.dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner { + order: 1; +} +.dnb-switch--label-position-right .dnb-switch__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-switch--label-position-right .dnb-switch__order .dnb-form-status { + order: 3; + margin-top: 0.5rem; +} +.dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__button, .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background::after { + border-color: var(--skeleton-color); +} +.dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background { + background-color: var(--skeleton-color); +} +.dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after { + border-color: var(--skeleton-color--contrast); +} +@supports (-ms-ime-align: auto) { .dnb-switch__input:not(:checked) ~ .dnb-switch__button { transform: translateX(0); - transform: translateX(calc(1px - 1px - var(--switch-border-width--medium))); } + } .dnb-switch__input:checked ~ .dnb-switch__button { - transform: translateX(1rem); - transform: translateX(calc( var(--switch-width--medium) - 1.5rem + var(--switch-border-width--medium))); } - .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button { - transform: translateX(calc(1px - 1px - var(--switch-border-width--large))); } - .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button { - transform: translateX(calc( var(--switch-width--large) - 2rem + var(--switch-border-width--large))); } - .dnb-switch__background { - width: var(--switch-width--medium); - height: calc(var(--switch-height--medium) - 0.5rem); - border-radius: calc(var(--switch-height--medium) - 0.5rem / 2); } - .dnb-switch--large .dnb-switch__background { - width: var(--switch-width--large); - height: calc(var(--switch-height--large) - 0.75rem); - border-radius: calc(var(--switch-height--large) - 0.75rem / 2); } - .dnb-switch__input { - opacity: 0; - position: absolute; - left: 0; - right: 0; - z-index: 5; - display: block; - width: var(--switch-width--medium); - height: var(--switch-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-switch--large .dnb-switch__input { - width: var(--switch-width--large); - height: var(--switch-height--large); } - .dnb-switch__input:not([disabled]) { - cursor: pointer; } - .dnb-switch .dnb-form-label { - padding-right: 0.5rem; - margin-right: 0; - margin-left: 0; - margin-bottom: 0; } - .dnb-switch__order { - display: inline-flex; } - .dnb-switch__suffix { - order: 4; } - .dnb-switch--label-position-left .dnb-switch__suffix { - padding-left: 1rem; } - .dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner { - order: 2; } - .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label { - order: 1; - align-self: flex-start; } - .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status { - order: 3; - margin-top: 0.5rem; } - .dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner { - order: 1; } - .dnb-switch--label-position-right .dnb-switch__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-switch--label-position-right .dnb-switch__order .dnb-form-status { - order: 3; - margin-top: 0.5rem; } - .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__button, - .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background::after { - border-color: var(--skeleton-color); } - .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background { - background-color: var(--skeleton-color); } - .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after { - border-color: var(--skeleton-color--contrast); } - @supports (-ms-ime-align: auto) { - .dnb-switch__input:not(:checked) ~ .dnb-switch__button { - transform: translateX(0); } - .dnb-switch__input:checked ~ .dnb-switch__button { - transform: translateX(calc(var(--switch-width--medium) - 1.5rem)); } } -" + transform: translateX(calc(var(--switch-width--medium) - 1.5rem)); + } +}" `; 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 f1dcb080633..e06969e784b 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 @@ -9,73 +9,79 @@ exports[`Table scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-table { - text-align: left; } - .dnb-table__th { - padding: 2rem 1rem 1rem; - font-weight: var(--font-weight-medium); - color: var(--theme-color-black-80, currentColor); - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - vertical-align: bottom; - background-color: var(--color-white); } - .dnb-table__td, - tbody > tr > .dnb-table__th { - padding: 1rem; - color: var(--theme-color-black-80, currentColor); - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - vertical-align: baseline; } - .dnb-table__size--medium .dnb-table__th { - padding: 1.375rem 1rem 0.875rem; - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-table__size--medium .dnb-table__th .dnb-button__text { - line-height: inherit; } - .dnb-table__size--small .dnb-table__th { - padding: 1.25rem 1rem 0.5rem; - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - tbody > tr > .dnb-table__th { - padding: 1rem; - vertical-align: baseline; } - .dnb-table__size--medium tbody > tr > .dnb-table__th, .dnb-table__size--medium - tbody > tr > .dnb-table__td { - padding: 0.875rem 1rem; - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-table__size--small tbody > tr > .dnb-table__th, .dnb-table__size--small - tbody > tr > .dnb-table__td { - padding: 0.625rem 1rem; - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after, - .dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr:last-of-type > .dnb-table__th::after, - .dnb-table:not(.dnb-table--outline) > tbody -> .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) td::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - border-bottom: var(--border); } + text-align: left; +} +.dnb-table__th { + padding: 2rem 1rem 1rem; + font-weight: var(--font-weight-medium); + color: var(--theme-color-black-80, currentColor); + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); + vertical-align: bottom; + background-color: var(--color-white); +} +.dnb-table__td, tbody > tr > .dnb-table__th { + padding: 1rem; + color: var(--theme-color-black-80, currentColor); + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); + vertical-align: baseline; +} +.dnb-table__size--medium .dnb-table__th { + padding: 1.375rem 1rem 0.875rem; + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-table__size--medium .dnb-table__th .dnb-button__text { + line-height: inherit; +} +.dnb-table__size--small .dnb-table__th { + padding: 1.25rem 1rem 0.5rem; + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +tbody > tr > .dnb-table__th { + padding: 1rem; + vertical-align: baseline; +} +.dnb-table__size--medium tbody > tr > .dnb-table__th, .dnb-table__size--medium tbody > tr > .dnb-table__td { + padding: 0.875rem 1rem; + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-table__size--small tbody > tr > .dnb-table__th, .dnb-table__size--small tbody > tr > .dnb-table__td { + padding: 0.625rem 1rem; + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after, .dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr:last-of-type > .dnb-table__th::after, .dnb-table:not(.dnb-table--outline) > tbody > .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) td::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border-bottom: var(--border); +} .dnb-table__container { - background-color: var(--color-white); } + background-color: var(--color-white); +} .dnb-table, .dnb-table__container { --border-width: 0.0625rem; --outline-width: 0.0625rem; --border: var(--border-width) solid var(--color-black-8); - --outline: var(--outline-width) solid var(--color-black-8); } - html[data-visual-test] .dnb-table, html[data-visual-test] - .dnb-table__container { - --border: 0.0625rem solid blue; - --outline: 0.0625rem solid red; } -" + --outline: var(--outline-width) solid var(--color-black-8); +} +html[data-visual-test] .dnb-table, +html[data-visual-test] .dnb-table__container { + --border: 0.0625rem solid blue; + --outline: 0.0625rem solid red; +}" `; exports[`Table scss have to match snapshot 1`] = ` @@ -101,282 +107,236 @@ exports[`Table scss have to match snapshot 1`] = ` margin-top: 0; margin-bottom: 0.5rem; border-spacing: 0; - border-collapse: collapse; } - .dnb-table--fixed { - table-layout: fixed; - width: auto; } - .dnb-table--no-wrap { - white-space: nowrap; } - .dnb-table > caption { - caption-side: bottom; - padding: 0.5rem 0 0.5rem 1rem; - font-size: var(--font-size-basis); - background-color: var(--color-white); - text-align: left; } - .dnb-table--border > caption:not(.dnb-sr-only) { - position: relative; } - .dnb-table--border > caption:not(.dnb-sr-only)::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - top: -0.0625rem; - border-top: var(--border); } - .dnb-table.dnb-skeleton > * { - -webkit-text-fill-color: var(--skeleton-color); } - .dnb-table > thead > tr > th.dnb-table--sortable, - .dnb-table .dnb-table__th.dnb-table--sortable { - color: var(--color-sea-green); } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button { - position: relative; - z-index: 1; - align-items: flex-end; - box-shadow: none; - line-height: inherit; - margin: 0; - padding: 0; - padding-right: 0.5rem; - color: inherit; - font-weight: var(--font-weight-medium); - text-align: inherit; - font-size: inherit; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon { - opacity: 0; - transition: opacity 200ms ease-out, transform 500ms ease-out; } - [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, [data-visual-test-wrapper] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon { - transition: none; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text { - margin: 0; - font-size: inherit; - line-height: inherit; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after { - right: 1rem; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon { - align-self: flex-end; - margin-top: auto; - margin-bottom: 0.25rem; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after { - opacity: 1; - color: var(--color-sea-green); } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) { - color: var(--color-sea-green); } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon { - opacity: 1; } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after { - opacity: 0; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] { - cursor: not-allowed; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before { - content: ''; - position: absolute; - top: -0.5rem; - bottom: -0.5rem; - left: -1rem; - right: 0.5rem; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before { - right: -0.5rem; } - html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, - :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, - :not(.dnb-table--active) - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, - :not(.dnb-table--active) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, - :not(.dnb-table--active) - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon { - opacity: 1; } - html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after { - opacity: 1; - color: inherit; } - html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after { - visibility: visible; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] { - cursor: not-allowed; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) { - color: var(--color-sea-green); } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - content: ''; - position: absolute; - z-index: 1; - top: 0; - left: -0.5rem; - bottom: 0; - right: -0.5rem; - height: inherit; - border-radius: inherit; - outline: none; } - html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - content: ''; - position: absolute; - z-index: 1; - top: 0; - left: -0.5rem; - bottom: 0; - right: -0.5rem; - height: inherit; - border-radius: inherit; - outline: none; } - html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - content: ''; - position: absolute; - top: -0.5rem; - bottom: -0.5rem; - left: -1rem; - right: 0.5rem; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - right: -0.5rem; } - .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after { - visibility: hidden; } - .dnb-table > thead > tr > th.dnb-table--sortable[align='right'], - .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] { - padding-right: 0.5rem; } - .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button, - .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button { - flex-direction: row-reverse; } - .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, - .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, - .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text { - padding-right: 0; } - .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after { - right: 0; } - .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after { - opacity: 0; } - .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon { - opacity: 1; } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after { - color: var(--color-sea-green); - opacity: 1; } - .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] { - cursor: not-allowed; } - .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after { - opacity: 0; } - .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after { - visibility: visible; } - html[data-whatinput='keyboard'] -.dnb-table > -thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard'] - .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after { - visibility: hidden; } - .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, - .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon { - transform: rotate(180deg); - transform-origin: 50% 50%; } - .dnb-table .dnb-table__th .dnb-table__help-button, - .dnb-table > thead > tr > th .dnb-table__help-button { - margin-left: 0.5rem; } - .dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button { - white-space: nowrap; } + border-collapse: collapse; +} +.dnb-table--fixed { + table-layout: fixed; + width: auto; +} +.dnb-table--no-wrap { + white-space: nowrap; +} +.dnb-table > caption { + caption-side: bottom; + padding: 0.5rem 0 0.5rem 1rem; + font-size: var(--font-size-basis); + background-color: var(--color-white); + text-align: left; +} +.dnb-table--border > caption:not(.dnb-sr-only) { + position: relative; +} +.dnb-table--border > caption:not(.dnb-sr-only)::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + top: -0.0625rem; + border-top: var(--border); +} +.dnb-table.dnb-skeleton > * { + -webkit-text-fill-color: var(--skeleton-color); +} +.dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable { + color: var(--color-sea-green); +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button { + position: relative; + z-index: 1; + align-items: flex-end; + box-shadow: none; + line-height: inherit; + margin: 0; + padding: 0; + padding-right: 0.5rem; + color: inherit; + font-weight: var(--font-weight-medium); + text-align: inherit; + font-size: inherit; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon { + opacity: 0; + transition: opacity 200ms ease-out, transform 500ms ease-out; +} +[data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, [data-visual-test-wrapper] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon { + transition: none; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text { + margin: 0; + font-size: inherit; + line-height: inherit; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after { + right: 1rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon { + align-self: flex-end; + margin-top: auto; + margin-bottom: 0.25rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after { + opacity: 1; + color: var(--color-sea-green); +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) { + color: var(--color-sea-green); +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon { + opacity: 1; +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after { + opacity: 0; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] { + cursor: not-allowed; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before { + content: ""; + position: absolute; + top: -0.5rem; + bottom: -0.5rem; + left: -1rem; + right: 0.5rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before { + right: -0.5rem; +} +html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon { + opacity: 1; +} +html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after { + opacity: 1; + color: inherit; +} +html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after { + visibility: visible; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] { + cursor: not-allowed; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) { + color: var(--color-sea-green); +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: -0.5rem; + bottom: 0; + right: -0.5rem; + height: inherit; + border-radius: inherit; + outline: none; +} +html[data-whatinput=mouse] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: -0.5rem; + bottom: 0; + right: -0.5rem; + height: inherit; + border-radius: inherit; + outline: none; +} +html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + content: ""; + position: absolute; + top: -0.5rem; + bottom: -0.5rem; + left: -1rem; + right: 0.5rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { + right: -0.5rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after { + visibility: hidden; +} +.dnb-table > thead > tr > th.dnb-table--sortable[align=right], .dnb-table .dnb-table__th.dnb-table--sortable[align=right] { + padding-right: 0.5rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button { + flex-direction: row-reverse; +} +.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text { + padding-right: 0; +} +.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after { + right: 0; +} +.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after { + opacity: 0; +} +.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon { + opacity: 1; +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after { + color: var(--color-sea-green); + opacity: 1; +} +.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] { + cursor: not-allowed; +} +.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after { + opacity: 0; +} +.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after { + visibility: visible; +} +html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after { + visibility: hidden; +} +.dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon { + transform: rotate(180deg); + transform-origin: 50% 50%; +} +.dnb-table .dnb-table__th .dnb-table__help-button, .dnb-table > thead > tr > th .dnb-table__help-button { + margin-left: 0.5rem; +} +.dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button { + white-space: nowrap; +} /* * Table component * */ +/* +* Button mixins +* +*/ .dnb-table__th__horizontal { display: flex; - align-items: flex-end; } - + align-items: flex-end; +} .dnb-table--border tbody .dnb-table__th::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -384,96 +344,106 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus bottom: 0; z-index: 1; pointer-events: none; - border-top: var(--border); } + border-top: var(--border); +} /* * Table component * */ +/* +* Button mixins +* +*/ .dnb-table { /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-table--border tbody .dnb-table__td::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - border: var(--border); - border-right: none; - border-bottom: none; } - .dnb-table--outline { - position: relative; } - .dnb-table--outline, .dnb-table--outline::after { - border-radius: 0.5rem; } - .dnb-table--outline::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - z-index: 3; - border: var(--outline); } - .dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after { - border-left: none; } - .dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after { - 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; } - .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); } - .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after, - .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, - .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after { - border-radius: 0.5rem 0 0 0; } - .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, - .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after { - border-top: var(--outline); } - .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after, - .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, - .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after { - border-radius: 0 0.5rem 0 0; } - .dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after, - .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after { - border-right: var(--border); } - .dnb-table__td--no-spacing, - .dnb-table td.dnb-table__td--no-spacing { - padding: 0; } - .dnb-table__td--spacing-horizontal, - .dnb-table td.dnb-table__td--spacing-horizontal { - padding-top: 0; - padding-bottom: 0; } + /* stylelint-enable */ +} +.dnb-table--border tbody .dnb-table__td::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border: var(--border); + border-right: none; + border-bottom: none; +} +.dnb-table--outline { + position: relative; +} +.dnb-table--outline, .dnb-table--outline::after { + border-radius: 0.5rem; +} +.dnb-table--outline::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + z-index: 3; + border: var(--outline); +} +.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after { + border-left: none; +} +.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after { + 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; +} +.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); +} +.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after { + border-radius: 0.5rem 0 0 0; +} +.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after { + border-top: var(--outline); +} +.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after { + border-radius: 0 0.5rem 0 0; +} +.dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after, .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after { + border-right: var(--border); +} +.dnb-table__td--no-spacing, +.dnb-table td.dnb-table__td--no-spacing { + padding: 0; +} +.dnb-table__td--spacing-horizontal, +.dnb-table td.dnb-table__td--spacing-horizontal { + padding-top: 0; + padding-bottom: 0; +} /* * Table component * */ -.dnb-table > tbody > tr, -.dnb-table .dnb-table__tr, -.dnb-table .dnb-table__tr--even { - background-color: var(--color-black-3); } - -.dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), -.dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), -.dnb-table .dnb-table__tr--odd { - background-color: var(--color-white); } - -.dnb-table--outline thead .dnb-table__tr:first-of-type, -.dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { - clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0); } - -.dnb-table--outline tbody .dnb-table__tr:last-of-type, -.dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { - clip-path: inset(0 round 0 0 0.5rem 0.5rem); } +/* +* Button mixins +* +*/ +.dnb-table > tbody > tr, .dnb-table .dnb-table__tr, .dnb-table .dnb-table__tr--even { + background-color: var(--color-black-3); +} +.dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr--odd { + background-color: var(--color-white); +} +.dnb-table--outline thead .dnb-table__tr:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { + clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0); +} +.dnb-table--outline tbody .dnb-table__tr:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { + clip-path: inset(0 round 0 0 0.5rem 0.5rem); +} /* * Table component @@ -482,7 +452,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-table__th, .dnb-table__td { position: relative; border-spacing: 0; - word-break: keep-all; } + word-break: keep-all; +} /* * Table component @@ -491,86 +462,104 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-table tr.sticky { position: sticky; z-index: 4; - transform: translate3d(0, var(--table-offset, 0), 0); } - + transform: translate3d(0, var(--table-offset, 0), 0); +} .dnb-table tr.sticky.css-position { - top: var(--table-top, 0); } - + top: var(--table-top, 0); +} .dnb-table tr.sticky.is-sticky th::before { - content: ''; + content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color); - clip-path: inset(6px 0 -48px 0); } + clip-path: inset(6px 0 -48px 0); +} /* * Table component * */ .dnb-table__container { - position: relative; } + position: relative; +} +.dnb-table__container::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + z-index: 3; + border: var(--outline); +} +.dnb-table__container, .dnb-table__container::after { + border-radius: 0.5rem; +} +.dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot { + display: flex; + flex-direction: column; +} +.dnb-table__container__body .dnb-table { + position: relative; + /* stylelint-disable */ + /* stylelint-enable */ +} +.dnb-table__container__body .dnb-table:not([class*=space__bottom]) { + margin-bottom: 0; +} +.dnb-table__container__body .dnb-table__size--large .dnb-table__th { + padding-top: 1.5rem; +} +.dnb-table__container__body .dnb-table::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border-bottom: var(--border); +} +.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after, +.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after, +.dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after { + border-top: none; +} +.dnb-table__container__head { + padding: 2rem 1rem 0; +} +.dnb-table__container__head--empty { + padding: 0; + min-height: 1.5rem; +} +.dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]) { + margin: 0; +} +.dnb-table__container__foot { + padding: 1rem; + padding-bottom: 1.25rem; +} +.dnb-table__container__foot--empty { + padding: 0; + min-height: 1rem; +} +.dnb-table__container .dnb-table__scroll-view { + clip-path: inset(0 round 0 0 0.5rem 0.5rem); +} +@supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) { .dnb-table__container::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - z-index: 3; - border: var(--outline); } - .dnb-table__container, .dnb-table__container::after { - border-radius: 0.5rem; } - .dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot { - display: flex; - flex-direction: column; } - .dnb-table__container__body .dnb-table { - position: relative; - /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-table__container__body .dnb-table:not([class*='space__bottom']) { - margin-bottom: 0; } - .dnb-table__container__body .dnb-table__size--large .dnb-table__th { - padding-top: 1.5rem; } - .dnb-table__container__body .dnb-table::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - pointer-events: none; - border-bottom: var(--border); } - .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after, - .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, - .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after, - .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after { - border-top: none; } - .dnb-table__container__head { - padding: 2rem 1rem 0; } - .dnb-table__container__head--empty { - padding: 0; - min-height: 1.5rem; } - .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) { - margin: 0; } - .dnb-table__container__foot { - padding: 1rem; - padding-bottom: 1.25rem; } - .dnb-table__container__foot--empty { - padding: 0; - min-height: 1rem; } - .dnb-table__container .dnb-table__scroll-view { - clip-path: inset(0 round 0 0 0.5rem 0.5rem); } - @supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) { - .dnb-table__container::after { - bottom: calc(var(--outline-width) * -1); } } - .dnb-modal__content .dnb-table__container .dnb-table__scroll-view { - overflow: visible; } + bottom: calc(var(--outline-width) * -1); + } +} +.dnb-modal__content .dnb-table__container .dnb-table__scroll-view { + overflow: visible; +} /* * Table component @@ -580,171 +569,214 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus --accordion-background: var(--color-white); --accordion-border-width: 0.0625rem; --accordion-border: var(--accordion-border-width) solid - var(--color-black-20); } - .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th { - padding: 0; } - .dnb-table__th.dnb-table__th__accordion-icon, - .dnb-table__th.dnb-table__th__accordion-icon div { - width: 3.5rem; - text-indent: -300vw; } - .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--medium - .dnb-table__th.dnb-table__th__accordion-icon div { - width: 3rem; } - .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--small - .dnb-table__th.dnb-table__th__accordion-icon div { - width: 2.5rem; } - .dnb-table__td.dnb-table__td__accordion-icon { - user-select: none; } - .dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td { - padding: 0; } - .dnb-table__tr--has-accordion-content .dnb-table__toggle-button { - display: flex; - justify-content: center; } - .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon { - color: var(--color-sea-green); - transition: transform 500ms var(--accordion-easing); } - .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, - html[data-visual-test] + var(--color-black-20); +} +.dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th { + padding: 0; +} +.dnb-table__th.dnb-table__th__accordion-icon, +.dnb-table__th.dnb-table__th__accordion-icon div { + width: 3.5rem; + text-indent: -300vw; +} +.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, +.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div { + width: 3rem; +} +.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, +.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div { + width: 2.5rem; +} +.dnb-table__td.dnb-table__td__accordion-icon { + user-select: none; +} +.dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td { + padding: 0; +} +.dnb-table__tr--has-accordion-content .dnb-table__toggle-button { + display: flex; + justify-content: center; +} .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon { - transition: none !important; } - .dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content { - position: relative; - z-index: 2; } - .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content { - z-index: 3; } - .dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, - html[data-whatinput='keyboard'] .dnb-table__tr--has-accordion-content:focus { - z-index: 5; } - .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon { - transform: rotate(180deg); } - .dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after { - border-bottom: none; } - .dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:not(:first-of-type)::after { - border-left: none; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) { - outline: none; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td::before { - content: ''; - position: absolute; - z-index: 3; - inset: 0; - pointer-events: none; - border: 0.125rem solid transparent; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before { - border-left: none; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before { - border-right: none; } - html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before { - border-color: var(--color-emerald-green); } - html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon { - color: var(--color-emerald-green); } - .dnb-table--outline tbody -.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before { - bottom: -0.0625rem; } - .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td { - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before { - top: 0; - bottom: 0; - border-color: var(--color-emerald-green); } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before { - left: 0; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before { - right: 0; } - html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before, - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before { - border-color: var(--color-emerald-green); - border-width: 0.0625rem; } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td { - background-color: var(--color-pistachio); } - .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon { - color: var(--color-emerald-green); } - .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td { - background-color: var(--accordion-background); } - .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before { - border: none; - border-top: var(--accordion-border); } - html:not([data-whatinput='keyboard']) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) { - background-color: var(--accordion-background); } - html:not([data-whatinput='keyboard']) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before { - border: none; - border-top: var(--accordion-border); } - .dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon { - color: var(--color-sea-green-30); } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-table__tr__accordion_content[hidden] { - /** - * By reverting the display from "none" to "block", - * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount). - */ - display: block; } } - .dnb-table__tr__accordion_content td { - padding: 0 !important; - width: calc(100% - 3.5rem); } - .dnb-table__size--medium .dnb-table__tr__accordion_content td { - width: calc(100% - 3rem); } - .dnb-table__size--small .dnb-table__tr__accordion_content td { - width: calc(100% - 2.5rem); } - .dnb-table__tr__accordion_content td::before { - content: ''; - position: absolute; - top: auto; - left: 0; - right: 0; - bottom: calc(var(--accordion-border-width) * -1); - pointer-events: none; - border-bottom: var(--accordion-border); } - .dnb-table--outline .dnb-table__tr__accordion_content:last-of-type td::before { - border-bottom: none; } - .dnb-table--border .dnb-table__tr__accordion_content td::after { - border-top: none; } - .dnb-table__tr__accordion_content__inner { - overflow: hidden; - will-change: height; - transition: height 400ms var(--accordion-easing); - position: relative; } - .dnb-table__tr__accordion_content__inner__spacing { - padding: 1rem; - transform: translateY(-10px); - transition: transform 500ms var(--accordion-easing); } - .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing { - transform: translateY(0); } - .dnb-table__tr__accordion_content > td.dnb-table__td { - padding: 0; } - .dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl, - .dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl dt { - margin: 0; } - .dnb-table__tr__accordion_content--expanded > td.dnb-table__td { - background-color: var(--color-white); } - .dnb-table__tr__accordion_content.dnb-table__tr .dnb-table__td { - background-color: var(--accordion-background); + color: var(--color-sea-green); + transition: transform 500ms var(--accordion-easing); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon { + transition: none !important; +} +.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content { + position: relative; + z-index: 2; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content { + z-index: 3; +} +.dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus { + z-index: 5; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon { + transform: rotate(180deg); +} +.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after { + border-bottom: none; +} +.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:not(:first-of-type)::after { + border-left: none; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) { + outline: none; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td::before { + content: ""; + position: absolute; + z-index: 3; + inset: 0; + pointer-events: none; + border: 0.125rem solid transparent; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before { + border-left: none; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before { + border-right: none; +} +html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before { + border-color: var(--color-emerald-green); +} +html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon { + color: var(--color-emerald-green); +} +.dnb-table--outline tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before { + bottom: -0.0625rem; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td { + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before { + top: 0; + bottom: 0; + border-color: var(--color-emerald-green); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before { + left: 0; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before { + right: 0; +} +html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before, +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before { + border-color: var(--color-emerald-green); + border-width: 0.0625rem; +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td { + background-color: var(--color-pistachio); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon { + color: var(--color-emerald-green); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td { + background-color: var(--accordion-background); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before { + border: none; + border-top: var(--accordion-border); +} +html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) { + background-color: var(--accordion-background); +} +html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before { + border: none; + border-top: var(--accordion-border); +} +.dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon { + color: var(--color-sea-green-30); +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-table__tr__accordion_content[hidden] { /** - * Safari on iOS and macOS has problems on animating when vertical-align is baseline. - * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that. - * But we do not need baseline in this tr > td, so we reset it. - */ - vertical-align: top; } - .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after { - border-radius: 0 0 0 0.5rem; } - .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after, - .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type, - .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before, - .dnb-table--outline tbody -.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after { - border-radius: 0 0 0.5rem 0; } - .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after { - border-radius: 0 0 0.5rem 0.5rem; } - .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) { - cursor: pointer; } - .dnb-table__td-wrapper { - display: flex; } + * By reverting the display from "none" to "block", + * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount). + */ + display: block; + } +} +.dnb-table__tr__accordion_content td { + padding: 0 !important; + width: calc(100% - 3.5rem); +} +.dnb-table__size--medium .dnb-table__tr__accordion_content td { + width: calc(100% - 3rem); +} +.dnb-table__size--small .dnb-table__tr__accordion_content td { + width: calc(100% - 2.5rem); +} +.dnb-table__tr__accordion_content td::before { + content: ""; + position: absolute; + top: auto; + left: 0; + right: 0; + bottom: calc(var(--accordion-border-width) * -1); + pointer-events: none; + border-bottom: var(--accordion-border); +} +.dnb-table--outline .dnb-table__tr__accordion_content:last-of-type td::before { + border-bottom: none; +} +.dnb-table--border .dnb-table__tr__accordion_content td::after { + border-top: none; +} +.dnb-table__tr__accordion_content__inner { + overflow: hidden; + will-change: height; + transition: height 400ms var(--accordion-easing); + position: relative; +} +.dnb-table__tr__accordion_content__inner__spacing { + padding: 1rem; + transform: translateY(-10px); + transition: transform 500ms var(--accordion-easing); +} +.dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing { + transform: translateY(0); +} +.dnb-table__tr__accordion_content > td.dnb-table__td { + padding: 0; +} +.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl, +.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl dt { + margin: 0; +} +.dnb-table__tr__accordion_content--expanded > td.dnb-table__td { + background-color: var(--color-white); +} +.dnb-table__tr__accordion_content.dnb-table__tr .dnb-table__td { + background-color: var(--accordion-background); + /** + * Safari on iOS and macOS has problems on animating when vertical-align is baseline. + * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that. + * But we do not need baseline in this tr > td, so we reset it. + */ + vertical-align: top; +} +.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after { + border-radius: 0 0 0 0.5rem; +} +.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after { + border-radius: 0 0 0.5rem 0; +} +.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after { + border-radius: 0 0 0.5rem 0.5rem; +} +.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) { + cursor: pointer; +} +.dnb-table__td-wrapper { + display: flex; +} .dnb-spacing .dnb-table p, .dnb-spacing .dnb-table ul, @@ -752,6 +784,6 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-spacing .dnb-table dl, .dnb-spacing .dnb-table pre { margin-top: 0; - margin-bottom: 0; } -" + margin-bottom: 0; +}" `; 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 6029b59c4ec..3a5eea04e56 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 @@ -1280,98 +1280,103 @@ exports[`Tabs scss have to match default theme snapshot 1`] = ` */ .dnb-tabs__tabs:not(.dnb-section)::before { background-color: var(--color-black-8); - box-shadow: 100vw 0 0 0 var(--color-black-8); } - + box-shadow: 100vw 0 0 0 var(--color-black-8); +} .dnb-tabs__tabs__tablist:focus { - border-radius: 0.5rem; } - + border-radius: 0.5rem; +} .dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type { - border-radius: 0 50% 50% 0; } - + border-radius: 0 50% 50% 0; +} .dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type { - border-radius: 50% 0 0 50%; } - + border-radius: 50% 0 0 50%; +} .dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus { - border-radius: 0; } - + border-radius: 0; +} .dnb-tabs__content:focus { - position: relative; } - .dnb-tabs__content:focus::before { - content: ''; - position: absolute; - z-index: -1; - top: 0.125rem; - bottom: -0.5rem; - left: -0.5rem; - right: -0.5rem; - max-width: 100vw; - border-radius: 0.5rem; - outline: none; } - html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - + position: relative; +} +.dnb-tabs__content:focus::before { + content: ""; + position: absolute; + z-index: -1; + top: 0.125rem; + bottom: -0.5rem; + left: -0.5rem; + right: -0.5rem; + max-width: 100vw; + border-radius: 0.5rem; + outline: none; +} +html[data-whatinput=keyboard] .dnb-tabs__content:focus::before { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} .dnb-tabs__button__title { font-weight: var(--font-weight-regular); font-size: var(--font-size-basis); text-align: center; display: block; color: var(--color-sea-green); - padding: 0.5rem 0 0.25rem 0; } - -html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] { - cursor: not-allowed; } - -html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) { - background-color: var(--color-mint-green-50); } - html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after { - height: 2px; - border-radius: 2px; - background-color: var(--color-sea-green); } - + padding: 0.5rem 0 0.25rem 0; +} +html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]) { + background-color: var(--color-mint-green-50); +} +html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled])::after { + height: 2px; + border-radius: 2px; + background-color: var(--color-sea-green); +} .dnb-tabs__button:focus { - overflow: visible; } - .dnb-tabs__button:focus::before { - content: ''; - position: absolute; - z-index: 1; - top: 0; - left: -0.5rem; - bottom: 0; - right: -0.5rem; - height: inherit; - border-radius: inherit; - outline: none; } - html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-tabs__button:focus::before { - top: 0.5rem; - left: -0.375rem; - right: -0.375rem; - bottom: 0.5rem; - border-radius: 1.5rem; } - + overflow: visible; +} +.dnb-tabs__button:focus::before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: -0.5rem; + bottom: 0; + right: -0.5rem; + height: inherit; + border-radius: inherit; + outline: none; +} +html[data-whatinput=keyboard] .dnb-tabs__button:focus::before { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-tabs__button:focus::before { + top: 0.5rem; + left: -0.375rem; + right: -0.375rem; + bottom: 0.5rem; + border-radius: 1.5rem; +} .dnb-tabs__button[disabled] .dnb-tabs__button__title { - color: var(--color-sea-green-30); } - + color: var(--color-sea-green-30); +} .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after { height: 2px; border-radius: 2px; - background-color: var(--color-sea-green); } - -.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title, + background-color: var(--color-sea-green); +} +.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title, .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title { + color: var(--color-emerald-green); +} .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title { - color: var(--color-emerald-green); } - -.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title { - font-weight: var(--font-weight-medium); } - + font-weight: var(--font-weight-medium); +} .dnb-tabs__button span[hidden] { - font-weight: var(--font-weight-medium); } -" + font-weight: var(--font-weight-medium); +}" `; exports[`Tabs scss have to match snapshot 1`] = ` @@ -1386,166 +1391,198 @@ exports[`Tabs scss have to match snapshot 1`] = ` * Tabs component * */ +/* + * Utilities + */ .dnb-tabs { /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-tabs__tabs { - position: relative; - z-index: 1; - display: flex; - align-items: center; } - .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing { - padding-bottom: 0; } - .dnb-tabs__tabs__tablist { - display: flex; - flex: 0 1 auto; - overflow-x: auto; - overscroll-behavior: contain; - scrollbar-width: thin; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: auto; - scrollbar-color: var(--color-sea-green) transparent; - /* Hide scrollbar for Chrome, Safari */ - /* stylelint-disable-next-line */ - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ } - .dnb-tabs__tabs__tablist:focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - @supports not (scrollbar-color: auto) { - .dnb-tabs__tabs__tablist::-webkit-scrollbar { - background-color: var(--color-black-8); } - .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical { - width: 0.5rem; } - .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal { - height: 0.5rem; } - .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb { - background-color: var(--color-sea-green); - border-radius: 0.5rem; } - .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover { - background-color: var(--color-emerald-green); } } - html:not([data-visual-test]) .dnb-tabs__tabs__tablist { - scroll-behavior: smooth; } - html[data-visual-test] .dnb-tabs__tabs__tablist { - scroll-behavior: auto !important; } - .dnb-tabs__tabs__tablist::-webkit-scrollbar { - display: none; } - .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist { - justify-content: flex-start; } - .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist { - flex: 1; - justify-content: flex-end; } - .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist { - justify-content: center; } - .dnb-tabs__tabs::before { - content: ''; - position: absolute; - z-index: -1; - left: -100vw; - bottom: 0; - width: 100vw; - height: 1px; } - .dnb-tabs__tabs--no-border::before { - content: none; } - .dnb-tabs__scroll-nav-button { - position: absolute; - z-index: 2; - right: -2px; - display: none; - opacity: 0; - pointer-events: none; - transition: opacity 600ms ease-out; } - .dnb-tabs__scroll-nav-button:first-of-type { - left: -2px; - right: auto; } - .dnb-tabs__scroll-nav-button--visible { - display: flex; - pointer-events: initial; - opacity: 1; } - .dnb-tabs__scroll-nav-button--hide { - pointer-events: none; - opacity: 0 !important; } - .dnb-tabs__button, - .dnb-core-style .dnb-tabs .dnb-tabs__button { - position: relative; - z-index: 1; - user-select: none; - -webkit-user-select: none; - margin: 0; - padding: 0 0.125rem; - /* 1/16*4 */ - background-color: transparent; - border-bottom: 1px solid transparent; - cursor: pointer; - outline: none; - border: none; - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - text-decoration: none; - white-space: nowrap; - transition: margin 400ms ease-out; } - .dnb-tabs__button__title .dnb-icon, - .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon { - font-size: var(--font-size-small); - transform: translateY(-0.125rem); } - .dnb-tabs__button .dnb-dummy, - .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy { - display: flex; - flex-direction: column; - height: 0; - visibility: hidden; - overflow: hidden; } - .dnb-tabs__button .dnb-dummy, - .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy { - margin-top: 0.25rem; } - .dnb-tabs__button::after, - .dnb-core-style .dnb-tabs .dnb-tabs__button::after { - content: ''; - position: absolute; - z-index: -1; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 1px; } + /* stylelint-enable */ +} +.dnb-tabs__tabs { + position: relative; + z-index: 1; + display: flex; + align-items: center; +} +.dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing { + padding-bottom: 0; +} +.dnb-tabs__tabs__tablist { + display: flex; + flex: 0 1 auto; + overflow-x: auto; + overscroll-behavior: contain; + scrollbar-width: thin; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: auto; + scrollbar-color: var(--color-sea-green) transparent; + /* Hide scrollbar for Chrome, Safari */ + /* stylelint-disable-next-line */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.dnb-tabs__tabs__tablist:focus { + outline: none; +} +html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +@supports not (scrollbar-color: auto) { + .dnb-tabs__tabs__tablist::-webkit-scrollbar { + background-color: var(--color-black-8); + } + .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical { + width: 0.5rem; + } + .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal { + height: 0.5rem; + } + .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb { + background-color: var(--color-sea-green); + border-radius: 0.5rem; + } + .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover { + background-color: var(--color-emerald-green); + } +} +html:not([data-visual-test]) .dnb-tabs__tabs__tablist { + scroll-behavior: smooth; +} +html[data-visual-test] .dnb-tabs__tabs__tablist { + scroll-behavior: auto !important; +} +.dnb-tabs__tabs__tablist::-webkit-scrollbar { + display: none; +} +.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist { + justify-content: flex-start; +} +.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist { + flex: 1; + justify-content: flex-end; +} +.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist { + justify-content: center; +} +.dnb-tabs__tabs::before { + content: ""; + position: absolute; + z-index: -1; + left: -100vw; + bottom: 0; + width: 100vw; + height: 1px; +} +.dnb-tabs__tabs--no-border::before { + content: none; +} +.dnb-tabs__scroll-nav-button { + position: absolute; + z-index: 2; + right: -2px; + display: none; + opacity: 0; + pointer-events: none; + transition: opacity 600ms ease-out; +} +.dnb-tabs__scroll-nav-button:first-of-type { + left: -2px; + right: auto; +} +.dnb-tabs__scroll-nav-button--visible { + display: flex; + pointer-events: initial; + opacity: 1; +} +.dnb-tabs__scroll-nav-button--hide { + pointer-events: none; + opacity: 0 !important; +} +.dnb-tabs__button, .dnb-core-style .dnb-tabs .dnb-tabs__button { + position: relative; + z-index: 1; + user-select: none; + -webkit-user-select: none; + margin: 0; + padding: 0 0.125rem; /* 1/16*4 */ + background-color: transparent; + border-bottom: 1px solid transparent; + cursor: pointer; + outline: none; + border: none; + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); + text-decoration: none; + white-space: nowrap; + transition: margin 400ms ease-out; +} +.dnb-tabs__button__title .dnb-icon, .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon { + font-size: var(--font-size-small); + transform: translateY(-0.125rem); +} +.dnb-tabs__button .dnb-dummy, .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy { + display: flex; + flex-direction: column; + height: 0; + visibility: hidden; + overflow: hidden; +} +.dnb-tabs__button .dnb-dummy, .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy { + margin-top: 0.25rem; +} +.dnb-tabs__button::after, .dnb-core-style .dnb-tabs .dnb-tabs__button::after { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 1px; +} +.dnb-tabs__button__snap { + display: flex; + padding: 0 1rem 0 1.5rem; + will-change: padding; + transition: padding 1s var(--easing-default); +} +@media screen and (max-width: 40em) { .dnb-tabs__button__snap { - display: flex; - padding: 0 1rem 0 1.5rem; - will-change: padding; - transition: padding 1s var(--easing-default); } - @media screen and (max-width: 40em) { - .dnb-tabs__button__snap { - padding: 0 1rem; } } - .dnb-tabs__button__snap:first-of-type { - padding-left: 0; } - .dnb-tabs__button__snap:last-of-type { - padding-right: 0.5rem; } - html[data-whatinput='keyboard'] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus { - margin-left: 0.5rem; } - html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus { - /* stylelint-disable */ - /* stylelint-enable */ } - html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus { - margin-right: 0.5rem; } - .dnb-tabs__cached { - opacity: 1; - transition: opacity 1s var(--easing-default); } - .dnb-tabs__cached--hidden { - opacity: 0; - visibility: hidden; - height: 0 !important; - overflow: hidden; } - html[data-visual-test] .dnb-tabs .dnb-tabs__cached, - html[data-visual-test] .dnb-tabs .dnb-tabs__button, - html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap, - html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button { - transition: none !important; } - .dnb-tabs__content { - padding-bottom: 0; } -" + padding: 0 1rem; + } +} +.dnb-tabs__button__snap:first-of-type { + padding-left: 0; +} +.dnb-tabs__button__snap:last-of-type { + padding-right: 0.5rem; +} +html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus { + margin-left: 0.5rem; +} +html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus { + /* stylelint-disable */ + /* stylelint-enable */ +} +html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus { + margin-right: 0.5rem; +} +.dnb-tabs__cached { + opacity: 1; + transition: opacity 1s var(--easing-default); +} +.dnb-tabs__cached--hidden { + opacity: 0; + visibility: hidden; + height: 0 !important; + overflow: hidden; +} +html[data-visual-test] .dnb-tabs .dnb-tabs__cached, html[data-visual-test] .dnb-tabs .dnb-tabs__button, html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap, html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button { + transition: none !important; +} +.dnb-tabs__content { + padding-bottom: 0; +}" `; 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 ba20d6fc387..accd102f073 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 @@ -12,14 +12,23 @@ exports[`Tag scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -27,63 +36,81 @@ exports[`Tag scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -94,156 +121,205 @@ exports[`Tag scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -261,7 +337,8 @@ exports[`Tag scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -279,160 +356,207 @@ exports[`Tag scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Tag component * */ +/* + * Utilities + */ /* * Button mixins * @@ -443,164 +567,188 @@ button.dnb-button::-moz-focus-inner { */ .dnb-tag.dnb-button { appearance: none; - background-color: var(--color-black-8); } - .dnb-tag.dnb-button.dnb-button--size-small { - padding-left: 0.5rem; - padding-right: 0.5rem; } - .dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon { - padding-left: 0; } - .dnb-tag.dnb-button .dnb-button__text { - font-size: var(--font-size-x-small); - transform: none; } - + background-color: var(--color-black-8); +} +.dnb-tag.dnb-button.dnb-button--size-small { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon { + padding-left: 0; +} +.dnb-tag.dnb-button .dnb-button__text { + font-size: var(--font-size-x-small); + transform: none; +} .dnb-tag:not(.dnb-tag--interactive) { user-select: unset; - cursor: unset; } - .dnb-tag:not(.dnb-tag--interactive) .dnb-button__text { - cursor: text; } - + cursor: unset; +} +.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text { + cursor: text; +} .dnb-tag--interactive.dnb-button { color: var(--color-sea-green); --border-color: var(--color-sea-green); box-shadow: inset 0 0 0 0.0625rem var(--border-color); /* iOS fix - because "inset" works not fine with border-radius */ /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-tag--interactive.dnb-button { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-tag--interactive.dnb-button { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-black-8); - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-tag--interactive.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus[disabled] { - cursor: not-allowed; } - .dnb-tag--interactive.dnb-button:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-black-8); } - html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-tag--interactive.dnb-button:active[disabled], - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active[disabled] { - cursor: not-allowed; } - .dnb-tag--interactive.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-mint-green-50); - --border-color: transparent; + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-tag--interactive.dnb-button { box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-tag--interactive.dnb-button[disabled] { - color: var(--color-sea-green-30); - background-color: var(--color-white); - --border-color: var(--color-sea-green-30); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-tag--interactive.dnb-button { box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + } +} +html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-black-8); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] { + cursor: not-allowed; +} +.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-black-8); +} +html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] { + cursor: not-allowed; +} +.dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-mint-green-50); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-tag--interactive.dnb-button[disabled] { + color: var(--color-sea-green-30); + background-color: var(--color-white); + --border-color: var(--color-sea-green-30); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} .dnb-tag--removable.dnb-button { color: var(--color-white); - background-color: var(--color-sea-green); } - .dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path { - fill: var(--color-white); } - .dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path { - stroke: var(--color-sea-green); } - .dnb-tag--removable.dnb-button:focus[disabled], - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus[disabled] { - cursor: not-allowed; } - .dnb-tag--removable.dnb-button:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - outline: none; } - html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path { - fill: var(--color-sea-green); } - .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path { - stroke: var(--color-white); } - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-white); - --border-color: var(--color-emerald-green); + background-color: var(--color-sea-green); +} +.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path { + fill: var(--color-white); +} +.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path { + stroke: var(--color-sea-green); +} +.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] { + cursor: not-allowed; +} +.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) { + outline: none; +} +html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); +} +html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path { - fill: var(--color-sea-green); } - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path { - stroke: var(--color-white); } - .dnb-tag--removable.dnb-button:active[disabled], - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active[disabled] { - cursor: not-allowed; } - .dnb-tag--removable.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) { - color: var(--color-sea-green); - background-color: var(--color-mint-green-50); - --border-color: transparent; - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path { - fill: var(--color-sea-green); } - .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path { - stroke: var(--color-white); } - .dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path { - fill: var(--color-mint-green-50); } - .dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path { - stroke: var(--color-sea-green-30); } - .dnb-tag--removable.dnb-button .dnb-button__text { - padding-left: 0.5rem; } - + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path { + fill: var(--color-sea-green); +} +.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path { + stroke: var(--color-white); +} +html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-white); + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path { + fill: var(--color-sea-green); +} +html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path { + stroke: var(--color-white); +} +.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] { + cursor: not-allowed; +} +.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) { + color: var(--color-sea-green); + background-color: var(--color-mint-green-50); + --border-color: transparent; + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; +} +.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path { + fill: var(--color-sea-green); +} +.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path { + stroke: var(--color-white); +} +.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path { + fill: var(--color-mint-green-50); +} +.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path { + stroke: var(--color-sea-green-30); +} +.dnb-tag--removable.dnb-button .dnb-button__text { + padding-left: 0.5rem; +} .dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon { - padding-right: 0; } - + padding-right: 0; +} .dnb-tag__group { display: inline-flex; flex-wrap: wrap; - gap: 0.5rem; } -" + gap: 0.5rem; +}" `; 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 f1dfc6683df..4ceafbdc9c9 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 @@ -155,7 +155,8 @@ exports[`Textarea scss have to match default theme snapshot 1`] = ` * Utilities */ :root { - --textarea-rows: 2; } + --textarea-rows: 2; +} .dnb-textarea__textarea { color: var(--color-black); @@ -165,69 +166,75 @@ exports[`Textarea scss have to match default theme snapshot 1`] = ` scrollbar-width: thin; -webkit-overflow-scrolling: touch; -ms-overflow-style: auto; - scrollbar-color: var(--color-sea-green) transparent; } - .dnb-textarea__textarea ::selection { - background-color: var(--color-mint-green); - color: var(--color-black); - text-shadow: none; } - @supports not (scrollbar-color: auto) { - .dnb-textarea__textarea::-webkit-scrollbar { - background-color: var(--color-black-8); } - .dnb-textarea__textarea::-webkit-scrollbar:vertical { - width: 0.5rem; } - .dnb-textarea__textarea::-webkit-scrollbar:horizontal { - height: 0.5rem; } - .dnb-textarea__textarea::-webkit-scrollbar-thumb { - background-color: var(--color-sea-green); - border-radius: 0.5rem; } - .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover { - background-color: var(--color-emerald-green); } } - html:not([data-visual-test]) .dnb-textarea__textarea { - scroll-behavior: smooth; } - html[data-visual-test] .dnb-textarea__textarea { - scroll-behavior: auto !important; } - + scrollbar-color: var(--color-sea-green) transparent; +} +.dnb-textarea__textarea ::selection { + background-color: var(--color-mint-green); + color: var(--color-black); + text-shadow: none; +} +@supports not (scrollbar-color: auto) { + .dnb-textarea__textarea::-webkit-scrollbar { + background-color: var(--color-black-8); + } + .dnb-textarea__textarea::-webkit-scrollbar:vertical { + width: 0.5rem; + } + .dnb-textarea__textarea::-webkit-scrollbar:horizontal { + height: 0.5rem; + } + .dnb-textarea__textarea::-webkit-scrollbar-thumb { + background-color: var(--color-sea-green); + border-radius: 0.5rem; + } + .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover { + background-color: var(--color-emerald-green); + } +} +html:not([data-visual-test]) .dnb-textarea__textarea { + scroll-behavior: smooth; +} +html[data-visual-test] .dnb-textarea__textarea { + scroll-behavior: auto !important; +} .dnb-textarea__placeholder { color: var(--color-black-55); display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: var(--textarea-rows, 2); } - -.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, -.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } - + -webkit-line-clamp: var(--textarea-rows, 2); +} +.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { + box-shadow: 0 0 0 0.125rem var(--color-emerald-green); +} .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); } - .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar { - width: 0; } - -.dnb-textarea--disabled .dnb-textarea__state, -.dnb-textarea__textarea[disabled] ~ .dnb-textarea__state { + background-color: var(--color-black-3); +} +.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar { + width: 0; +} +.dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state { box-shadow: 0 0 0 0.0625rem var(--color-black-55); - background-color: var(--color-black-3); } - -.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), -.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover { - color: var(--color-fire-red); } - + background-color: var(--color-black-3); +} +.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover { + color: var(--color-fire-red); +} .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - + border-color: transparent; +} .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { --border-color: var(--color-fire-red); 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 { - display: none; } -" + 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 { + display: none; +}" `; exports[`Textarea scss have to match snapshot 1`] = ` @@ -242,10 +249,16 @@ exports[`Textarea scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -256,207 +269,268 @@ exports[`Textarea scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Textarea component * */ +/* + * Utilities + */ :root { - --textarea-padding-width: 0.5rem; } + --textarea-padding-width: 0.5rem; +} .dnb-textarea { display: inline-flex; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-textarea__inner { - display: inline-flex; - flex-direction: column; - margin: var(--textarea-padding-width); } - .dnb-textarea__shell { - display: inline-flex; - position: relative; - font-size: var(--font-size-basis); } - .dnb-textarea__state { - position: absolute; - z-index: 1; - top: -0.5rem; - left: -0.5rem; - bottom: -0.5rem; - right: -0.5rem; - background-color: var(--color-white); - box-shadow: 0 0 0 0.0625rem var(--color-sea-green); - border-radius: 0.25rem; } - .dnb-textarea__row { - display: inline-flex; } - .dnb-textarea__suffix { - padding-left: 1.5rem; } - .dnb-textarea__textarea { - position: relative; - z-index: 2; - cursor: auto; - border: none; - margin: 0; - padding: 0 var(--textarea-padding-width); - outline: none; - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-textarea__placeholder { - pointer-events: none; - position: absolute; - z-index: 3; - top: 0; - left: 0; - overflow: hidden; - width: 100%; - height: 100%; - cursor: auto; - border: none; - margin: 0; - padding: 0 var(--textarea-padding-width); - outline: none; - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-textarea__textarea, .dnb-textarea__placeholder { - text-align: left; } - .dnb-textarea__align--right .dnb-textarea__textarea, - .dnb-textarea__align--right .dnb-textarea__placeholder { - text-align: right; } - .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 { - opacity: 0.5; } - .dnb-textarea__inner > .dnb-form-status { - order: 2; - margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width)); } - .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label { - margin-top: 0.5rem; } - .dnb-textarea--vertical { + line-height: var(--line-height-basis); +} +.dnb-textarea__inner { + display: inline-flex; + flex-direction: column; + margin: var(--textarea-padding-width); +} +.dnb-textarea__shell { + display: inline-flex; + position: relative; + font-size: var(--font-size-basis); +} +.dnb-textarea__state { + position: absolute; + z-index: 1; + top: -0.5rem; + left: -0.5rem; + bottom: -0.5rem; + right: -0.5rem; + background-color: var(--color-white); + box-shadow: 0 0 0 0.0625rem var(--color-sea-green); + border-radius: 0.25rem; +} +.dnb-textarea__row { + display: inline-flex; +} +.dnb-textarea__suffix { + padding-left: 1.5rem; +} +.dnb-textarea__textarea { + position: relative; + z-index: 2; + cursor: auto; + border: none; + margin: 0; + padding: 0 var(--textarea-padding-width); + outline: none; + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-textarea__placeholder { + pointer-events: none; + position: absolute; + z-index: 3; + top: 0; + left: 0; + overflow: hidden; + width: 100%; + height: 100%; + cursor: auto; + border: none; + margin: 0; + padding: 0 var(--textarea-padding-width); + outline: none; + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-textarea__textarea, .dnb-textarea__placeholder { + text-align: left; +} +.dnb-textarea__align--right .dnb-textarea__textarea, .dnb-textarea__align--right .dnb-textarea__placeholder { + text-align: right; +} +.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 { + opacity: 0.5; +} +.dnb-textarea__inner > .dnb-form-status { + order: 2; + margin: 1rem 0 0 calc(0px - var(--textarea-padding-width)); +} +.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label { + margin-top: 0.5rem; +} +.dnb-textarea--vertical { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status] { + align-items: flex-start; +} +.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status] > .dnb-form-label { + margin-top: 0.25rem; +} +@media screen and (max-width: 40em) { + .dnb-textarea { + flex-wrap: wrap; + } + .dnb-textarea > .dnb-form-label { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } +} +.dnb-textarea--stretch { + display: flex; + flex-grow: 1; +} +.dnb-textarea--stretch .dnb-textarea__inner { + flex-grow: 1; +} +.dnb-textarea--stretch .dnb-textarea__shell, .dnb-textarea--stretch .dnb-textarea__inner, .dnb-textarea--stretch .dnb-textarea__textarea { + width: 100%; +} +.dnb-textarea--stretch .dnb-form-label + .dnb-textarea__inner { + width: auto; +} +.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner { + width: 100%; +} +.dnb-form-row--horizontal .dnb-textarea--stretch { + width: 100%; +} +@media screen and (max-width: 40em) { + .dnb-responsive-component .dnb-textarea { display: flex; flex-direction: column; - align-items: flex-start; } - .dnb-textarea:not(.dnb-textarea--vertical)[class*='__status'] { - align-items: flex-start; } - .dnb-textarea:not(.dnb-textarea--vertical)[class*='__status'] > .dnb-form-label { - margin-top: 0.25rem; } - @media screen and (max-width: 40em) { - .dnb-textarea { - flex-wrap: wrap; } - .dnb-textarea > .dnb-form-label { - margin-bottom: 0.5rem; - margin-top: 0.5rem; } } - .dnb-textarea--stretch { - display: flex; - flex-grow: 1; } - .dnb-textarea--stretch .dnb-textarea__inner { - flex-grow: 1; } - .dnb-textarea--stretch .dnb-textarea__shell, .dnb-textarea--stretch .dnb-textarea__inner, .dnb-textarea--stretch .dnb-textarea__textarea { - width: 100%; } - .dnb-textarea--stretch .dnb-form-label + .dnb-textarea__inner { - width: auto; } - .dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner { - width: 100%; } - .dnb-form-row--horizontal .dnb-textarea--stretch { - width: 100%; } - @media screen and (max-width: 40em) { - .dnb-responsive-component .dnb-textarea { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 0.5rem; } - .dnb-responsive-component .dnb-textarea > .dnb-form-label { - margin-bottom: 0.5rem; } } - html[data-visual-test] .dnb-textarea__textarea { - caret-color: var(--color-white); } - .dnb-textarea.dnb-skeleton .dnb-textarea__inner { - margin: 0; - border-radius: 0.25rem; } - .dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell { - margin: var(--textarea-padding-width); } - .dnb-textarea.dnb-skeleton .dnb-textarea__state, - .dnb-textarea.dnb-skeleton .dnb-textarea__textarea { - visibility: hidden; } -" + align-items: flex-start; + margin-bottom: 0.5rem; + } + .dnb-responsive-component .dnb-textarea > .dnb-form-label { + margin-bottom: 0.5rem; + } +} +html[data-visual-test] .dnb-textarea__textarea { + caret-color: var(--color-white); +} +.dnb-textarea.dnb-skeleton .dnb-textarea__inner { + margin: 0; + border-radius: 0.25rem; +} +.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell { + margin: var(--textarea-padding-width); +} +.dnb-textarea.dnb-skeleton .dnb-textarea__state, .dnb-textarea.dnb-skeleton .dnb-textarea__textarea { + visibility: hidden; +}" `; diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap index cd18ce24758..d6bc55bd571 100644 --- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap @@ -32,75 +32,97 @@ exports[`Timeline scss have to match default theme snapshot 1`] = ` --timeline-border-spacing: var(--spacing-small); --timeline-border-spacing--icon-adjusted: calc( var(--timeline-icon-width-diff) + var(--timeline-border-spacing) - ); } + ); +} .dnb-timeline__item { - margin-left: var(--timeline-icon-width-diff); } + margin-left: var(--timeline-icon-width-diff); +} +.dnb-timeline__item__label__icon { + width: var(--timeline-icon-width--small); + line-height: var(--timeline-icon-height--small); + border-radius: var(--timeline-icon-border-radius--small); + color: var(--color-black-80); + background-color: var(--color-white); + --border-color: var(--color-black-80); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-timeline__item__label__icon { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-timeline__item__label__icon { - width: var(--timeline-icon-width--small); - line-height: var(--timeline-icon-height--small); - border-radius: var(--timeline-icon-border-radius--small); - color: var(--color-black-80); - background-color: var(--color-white); - --border-color: var(--color-black-80); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-timeline__item__label__icon { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-timeline__item__label__icon { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - .dnb-timeline__item__label__title { - margin-left: var(--timeline-border-spacing--icon-adjusted); - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-timeline__item__content { - margin-left: calc(var(--timeline-icon-width--small) / 2); - padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted)); - border-left: 1px dashed var(--color-black-55); } - .dnb-timeline__item--completed .dnb-timeline__item__content { - border-left: 1px solid var(--color-black-80); } - .dnb-timeline__item--completed .dnb-timeline__item__label__title { - color: var(--color-black-80); } - .dnb-timeline__item--current .dnb-timeline__item__content { - margin-left: calc(var(--timeline-icon-width--medium) / 2); - padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); } - .dnb-timeline__item--current .dnb-timeline__item__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); } - .dnb-timeline__item--current .dnb-timeline__item__label__icon { - width: var(--timeline-icon-width--medium); - line-height: var(--timeline-icon-height--medium); - border-radius: var(--timeline-icon-border-radius--medium); } - .dnb-timeline__item--current { - margin-left: 0; } - .dnb-timeline__item--upcoming .dnb-timeline__item__label__title { - font-weight: var(--font-weight-basis); - color: var(--color-black-55); } + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-timeline__item__label__title { + margin-left: var(--timeline-border-spacing--icon-adjusted); + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-timeline__item__content { + margin-left: calc(var(--timeline-icon-width--small) / 2); + padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted)); + border-left: 1px dashed var(--color-black-55); +} +.dnb-timeline__item--completed .dnb-timeline__item__content { + border-left: 1px solid var(--color-black-80); +} +.dnb-timeline__item--completed .dnb-timeline__item__label__title { + color: var(--color-black-80); +} +.dnb-timeline__item--current .dnb-timeline__item__content { + margin-left: calc(var(--timeline-icon-width--medium) / 2); + padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); +} +.dnb-timeline__item--current .dnb-timeline__item__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); +} +.dnb-timeline__item--current .dnb-timeline__item__label__icon { + width: var(--timeline-icon-width--medium); + line-height: var(--timeline-icon-height--medium); + border-radius: var(--timeline-icon-border-radius--medium); +} +.dnb-timeline__item--current { + margin-left: 0; +} +.dnb-timeline__item--upcoming .dnb-timeline__item__label__title { + font-weight: var(--font-weight-basis); + color: var(--color-black-55); +} +.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { + color: var(--color-black-55); + background-color: var(--color-black-3); + --border-color: var(--color-black-3); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { - color: var(--color-black-55); - background-color: var(--color-black-3); - --border-color: var(--color-black-3); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - .dnb-timeline__item:only-child { - margin-left: 0; } - .dnb-timeline__item:last-child .dnb-timeline__item__content { - border-left: none; } -" + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-timeline__item:only-child { + margin-left: 0; +} +.dnb-timeline__item:last-child .dnb-timeline__item__content { + border-left: none; +}" `; exports[`Timeline scss have to match snapshot 1`] = ` @@ -115,31 +137,40 @@ exports[`Timeline scss have to match snapshot 1`] = ` * Timeline component * */ +/* + * Utilities + */ .dnb-timeline { display: flex; - flex-direction: column; } - .dnb-timeline__item__label { - display: flex; - align-items: center; - text-align: left; - padding: 0; } - .dnb-timeline__item__label__icon { - display: flex; - flex-shrink: 0; - align-items: center; - height: auto; - justify-content: center; - padding: 0; } - .dnb-timeline__item__label__title { - cursor: text; } - .dnb-timeline__item__content { - padding-bottom: var(--spacing-small); } - .dnb-timeline__item__content__subtitle { - cursor: text; - font-size: var(--font-size-x-small); - font-weight: var(--font-weight-basis); - color: var(--color-black-55); } - .dnb-timeline__item__content__info { - padding-top: var(--spacing-x-small); } -" + flex-direction: column; +} +.dnb-timeline__item__label { + display: flex; + align-items: center; + text-align: left; + padding: 0; +} +.dnb-timeline__item__label__icon { + display: flex; + flex-shrink: 0; + align-items: center; + height: auto; + justify-content: center; + padding: 0; +} +.dnb-timeline__item__label__title { + cursor: text; +} +.dnb-timeline__item__content { + padding-bottom: var(--spacing-small); +} +.dnb-timeline__item__content__subtitle { + cursor: text; + font-size: var(--font-size-x-small); + font-weight: var(--font-weight-basis); + color: var(--color-black-55); +} +.dnb-timeline__item__content__info { + padding-top: var(--spacing-x-small); +}" `; 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 3227187b980..ac7571a09d5 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 @@ -1427,207 +1427,220 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` * */ /* stylelint-disable */ - /* stylelint-enable */ } - .dnb-toggle-button .dnb-checkbox__gfx path { - stroke-width: 0.125rem; } - .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: 0 0 0 0.0318rem var(--color-sea-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) { - background-color: var(--color-emerald-green); - color: var(--color-mint-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon { - color: inherit; } - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button { - background-color: transparent; - border-color: var(--color-mint-green); - box-shadow: 0 0 0 0.0318rem var(--color-mint-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot { - background-color: var(--color-mint-green); } - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.09375rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot { - background-color: var(--color-emerald-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button { - background-color: var(--color-mint-green); - border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.0318rem var(--color-emerald-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx { - color: var(--color-emerald-green); } - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button { - background-color: var(--color-emerald-green); } - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx { - color: var(--color-mint-green); } - .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button { - box-shadow: none; } - html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - color: var(--color-emerald-green); - background-color: var(--color-mint-green); } - html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - outline: none; } - html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button { - background-color: transparent; - border-color: var(--color-sea-green); - box-shadow: 0 0 0 0.0318rem var(--color-sea-green); } - .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot, - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot { - background-color: var(--color-sea-green); } - .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button, - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button { - background-color: transparent; - border-color: var(--color-sea-green); - box-shadow: 0 0 0 0.0318rem var(--color-sea-green); } - .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx, - .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx { - color: var(--color-sea-green); } + /* stylelint-enable */ +} +.dnb-toggle-button .dnb-checkbox__gfx path { + stroke-width: 0.125rem; +} +.dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { + box-shadow: 0 0 0 0.0318rem var(--color-sea-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) { + background-color: var(--color-emerald-green); + color: var(--color-mint-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon, .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon { + color: inherit; +} +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button { + background-color: transparent; + border-color: var(--color-mint-green); + box-shadow: 0 0 0 0.0318rem var(--color-mint-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot { + background-color: var(--color-mint-green); +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.09375rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot { + background-color: var(--color-emerald-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button { + background-color: var(--color-mint-green); + border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.0318rem var(--color-emerald-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx { + color: var(--color-emerald-green); +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button { + background-color: var(--color-emerald-green); +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx { + color: var(--color-mint-green); +} +.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button, +.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button, +.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button, +.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button { + box-shadow: none; +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { + color: var(--color-emerald-green); + background-color: var(--color-mint-green); +} +html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { + outline: none; +} +html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); + } +} +.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button { + background-color: transparent; + border-color: var(--color-sea-green); + box-shadow: 0 0 0 0.0318rem var(--color-sea-green); +} +.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot { + background-color: var(--color-sea-green); +} +.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button { + background-color: transparent; + border-color: var(--color-sea-green); + box-shadow: 0 0 0 0.0318rem var(--color-sea-green); +} +.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx { + color: var(--color-sea-green); +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { + background-color: var(--color-white); + color: var(--color-fire-red); + --border-color: var(--color-fire-red); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - background-color: var(--color-white); - color: var(--color-fire-red); - --border-color: var(--color-fire-red); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { + --border-color: var(--color-fire-red); + box-shadow: inset 0 0 0 0.09375rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - --border-color: var(--color-fire-red); - box-shadow: inset 0 0 0 0.09375rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus { - box-shadow: none; } - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot { - background-color: transparent; } + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus { + box-shadow: none; +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot { + background-color: transparent; +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { + border: none; + --border-color: var(--color-fire-red); + box-shadow: inset 0 0 0 0.09375rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { - border: none; - --border-color: var(--color-fire-red); - box-shadow: inset 0 0 0 0.09375rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus { - box-shadow: none; } + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus { + box-shadow: none; +} +.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { + color: var(--color-white); + background-color: var(--color-fire-red); + --border-color: var(--color-fire-red); + box-shadow: inset 0 0 0 0.0625rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - color: var(--color-white); - background-color: var(--color-fire-red); - --border-color: var(--color-fire-red); - box-shadow: inset 0 0 0 0.0625rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: 0 0 0 0.0625rem var(--border-color); } } + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { + .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { + box-shadow: 0 0 0 0.0625rem var(--border-color); + } +} +.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { + --border-color: var(--color-white); + box-shadow: inset 0 0 0 0.09375rem var(--border-color); + /* iOS fix - because "inset" works not fine with border-radius */ + /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ + border-color: transparent; +} +@supports (-webkit-touch-callout: none) { + .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - --border-color: var(--color-white); - box-shadow: inset 0 0 0 0.09375rem var(--border-color); - /* iOS fix - because "inset" works not fine with border-radius */ - /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: 0 0 0 0.09375rem var(--border-color); } } - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot { - background-color: var(--color-white); } - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { - background-color: var(--color-white); } - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox -.dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) -~ .dnb-checkbox__gfx { - color: var(--color-fire-red); } - .dnb-toggle-button > .dnb-form-status { - transform: translateY(0.1875rem); } -" + box-shadow: 0 0 0 0.09375rem var(--border-color); + } +} +.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot { + background-color: var(--color-white); +} +.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { + background-color: var(--color-white); +} +.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx { + color: var(--color-fire-red); +} +.dnb-toggle-button > .dnb-form-status { + transform: translateY(0.1875rem); +}" `; exports[`ToggleButton scss have to match snapshot 1`] = ` @@ -1642,10 +1655,16 @@ exports[`ToggleButton scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormLabel component * */ +/* + * Utilities + */ .dnb-form-label { display: inline-block; width: auto; @@ -1656,33 +1675,47 @@ exports[`ToggleButton scss have to match snapshot 1`] = ` white-space: pre-wrap; word-break: normal; font-size: var(--font-size-basis); - color: inherit; } - .dnb-form-label--vertical { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; } - .dnb-form-label[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; - cursor: pointer; } - .dnb-form-label[disabled] { - cursor: not-allowed; } + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} legend.dnb-form-label { - display: inline-block; } + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -1690,63 +1723,81 @@ legend.dnb-form-label { line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -1757,156 +1808,205 @@ legend.dnb-form-label { padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -1924,7 +2024,8 @@ legend.dnb-form-label { --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -1942,280 +2043,633 @@ legend.dnb-form-label { border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + /* * Checkbox component * */ +/* + * Utilities + */ :root { --checkbox-width--medium: 1.5rem; --checkbox-height--medium: 1.5rem; --checkbox-width--large: 2rem; --checkbox-height--large: 2rem; - --checkbox-border-width: 0.125rem; } + --checkbox-border-width: 0.125rem; +} .dnb-checkbox { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-checkbox__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-checkbox__shell { - user-select: none; - -webkit-user-select: none; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); } - .dnb-checkbox--large .dnb-checkbox__shell { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__button { - display: inline-block; - border: var(--checkbox-border-width) solid transparent; } - .dnb-checkbox__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-checkbox__focus, .dnb-checkbox__button { - position: relative; - z-index: 4; - width: calc(var(--checkbox-width--medium) - 0.25rem); - height: calc(var(--checkbox-height--medium) - 0.25rem); - border-radius: 0.25rem; } - .dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); - border-radius: 0.25rem; } - .dnb-checkbox__gfx { - position: absolute; - z-index: 5; - top: auto; - left: auto; - width: calc(var(--checkbox-width--medium) - 0.5rem); - height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; } - .dnb-checkbox--large { - line-height: var(--checkbox-height--large); } - .dnb-checkbox--large .dnb-checkbox__gfx { - width: calc(var(--checkbox-width--large) - 0.5rem); - height: calc(var(--checkbox-height--large) - 0.5rem); } - .dnb-checkbox__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 6; - width: var(--checkbox-width--medium); - height: var(--checkbox-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-checkbox--large .dnb-checkbox__input { - width: var(--checkbox-width--large); - height: var(--checkbox-height--large); } - .dnb-checkbox__input:not([disabled]) { - cursor: pointer; } - .dnb-checkbox .dnb-form-label { - margin-bottom: 0; - margin-right: 0; - margin-left: 0; } - .dnb-checkbox__order { - display: inline-flex; - align-items: baseline; } - .dnb-checkbox__suffix { - order: 4; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { - order: 2; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { - order: 3; - margin-top: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { - order: 1; } - .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { - order: 3; - vertical-align: top; - margin-top: 0.5rem; } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { - border-color: var(--skeleton-color); } - .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { - border-radius: 0; } + line-height: var(--line-height-basis); +} +.dnb-checkbox__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-checkbox__shell { + user-select: none; + -webkit-user-select: none; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); +} +.dnb-checkbox--large .dnb-checkbox__shell { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__button { + display: inline-block; + border: var(--checkbox-border-width) solid transparent; +} +.dnb-checkbox__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-checkbox__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-checkbox__focus, .dnb-checkbox__button { + position: relative; + z-index: 4; + width: calc(var(--checkbox-width--medium) - 0.25rem); + height: calc(var(--checkbox-height--medium) - 0.25rem); + border-radius: 0.25rem; +} +.dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); + border-radius: 0.25rem; +} +.dnb-checkbox__gfx { + position: absolute; + z-index: 5; + top: auto; + left: auto; + width: calc(var(--checkbox-width--medium) - 0.5rem); + height: calc(var(--checkbox-height--medium) - 0.5rem); + shape-rendering: geometricPrecision; +} +.dnb-checkbox--large { + line-height: var(--checkbox-height--large); +} +.dnb-checkbox--large .dnb-checkbox__gfx { + width: calc(var(--checkbox-width--large) - 0.5rem); + height: calc(var(--checkbox-height--large) - 0.5rem); +} +.dnb-checkbox__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 6; + width: var(--checkbox-width--medium); + height: var(--checkbox-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-checkbox--large .dnb-checkbox__input { + width: var(--checkbox-width--large); + height: var(--checkbox-height--large); +} +.dnb-checkbox__input:not([disabled]) { + cursor: pointer; +} +.dnb-checkbox .dnb-form-label { + margin-bottom: 0; + margin-right: 0; + margin-left: 0; +} +.dnb-checkbox__order { + display: inline-flex; + align-items: baseline; +} +.dnb-checkbox__suffix { + order: 4; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner { + order: 2; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status { + order: 3; + margin-top: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner { + order: 1; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status { + order: 3; + vertical-align: top; + margin-top: 0.5rem; +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { + border-color: var(--skeleton-color); +} +.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { + border-radius: 0; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormLabel component + * + */ +/* + * Utilities + */ +.dnb-form-label { + display: inline-block; + width: auto; + padding: 0; + margin-right: 1rem; + text-align: left; + vertical-align: baseline; + white-space: pre-wrap; + word-break: normal; + font-size: var(--font-size-basis); + color: inherit; +} +.dnb-form-label--vertical { + display: block; + margin-right: 0; + margin-bottom: 0.5rem; +} +.dnb-form-label[for]:not([disabled]) { + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} +.dnb-form-label[disabled] { + cursor: not-allowed; +} + +legend.dnb-form-label { + display: inline-block; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} + /* * Radio component * */ +/* + * Utilities + */ :root { --radio-width--medium: 1.5rem; --radio-height--medium: 1.5rem; @@ -2223,243 +2677,413 @@ button.dnb-button::-moz-focus-inner { --radio-height--large: 2rem; --radio-border-width: 0.125rem; --radio-margin-right: 1rem; - --radio-margin-bottom: 0.5rem; } + --radio-margin-bottom: 0.5rem; +} .dnb-radio { display: inline-flex; flex-direction: column; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-radio__inner { - display: inline-flex; - flex-direction: column; - align-self: center; } - .dnb-radio__shell { - position: relative; - user-select: none; - -webkit-user-select: none; - display: flex; - align-items: center; - justify-content: center; - width: var(--radio-width--medium); - height: var(--radio-height--medium); } - .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - position: absolute; - z-index: 4; } - .dnb-radio__button { - border: var(--radio-border-width) solid transparent; } - .dnb-radio__focus { - display: none; - outline: none; } - html[data-whatinput='keyboard'] .dnb-radio__focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-radio__focus, .dnb-radio__button { - width: calc(var(--radio-width--medium) - 0.25rem); - height: calc(var(--radio-height--medium) - 0.25rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { - width: calc(var(--radio-width--large) - 0.125rem); - height: calc(var(--radio-height--large) - 0.125rem); } - .dnb-radio__dot { - width: calc(var(--radio-width--medium) - 0.75rem); - height: calc(var(--radio-height--medium) - 0.75rem); - border-radius: 50%; } - .dnb-radio--large .dnb-radio__dot { - width: calc(var(--radio-width--large) - 0.875rem); - height: calc(var(--radio-height--large) - 0.875rem); } - .dnb-radio__input { - opacity: 0; - position: absolute; - top: auto; - left: auto; - z-index: 5; - width: var(--radio-width--medium); - height: var(--radio-height--medium); - margin: 0; - padding: 0; - border: 0; } - .dnb-radio--large .dnb-radio__input { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio__input:not([disabled]) { - cursor: pointer; } - .dnb-radio__order { - display: inline-flex; - align-items: baseline; } - .dnb-radio-group--column .dnb-radio__order { - display: flex; } - .dnb-radio__row { - display: inline-flex; } - .dnb-radio__suffix { - order: 3; } - .dnb-radio__suffix .dnb-modal__trigger { - margin-top: -0.25rem; - margin-bottom: -0.25rem; } - .dnb-radio-group__suffix { - font-size: var(--font-size-basis); } - .dnb-radio--large { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__suffix { - line-height: var(--radio-height--large); } - .dnb-radio--large .dnb-radio__shell { - width: var(--radio-width--large); - height: var(--radio-height--large); } - .dnb-radio .dnb-form-label { - margin-right: 0; - margin-left: 0; - margin-bottom: 0; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { - order: 2; } - .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { - order: 1; - padding-right: 0.5rem; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { - order: 1; } - .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { - order: 2; - padding-left: 0.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] + line-height: var(--line-height-basis); +} +.dnb-radio__inner { + display: inline-flex; + flex-direction: column; + align-self: center; +} +.dnb-radio__shell { + position: relative; + user-select: none; + -webkit-user-select: none; + display: flex; + align-items: center; + justify-content: center; + width: var(--radio-width--medium); + height: var(--radio-height--medium); +} +.dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { + position: absolute; + z-index: 4; +} +.dnb-radio__button { + border: var(--radio-border-width) solid transparent; +} +.dnb-radio__focus { + display: none; + outline: none; +} +html[data-whatinput=keyboard] .dnb-radio__focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-radio__focus, .dnb-radio__button { + width: calc(var(--radio-width--medium) - 0.25rem); + height: calc(var(--radio-height--medium) - 0.25rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button { + width: calc(var(--radio-width--large) - 0.125rem); + height: calc(var(--radio-height--large) - 0.125rem); +} +.dnb-radio__dot { + width: calc(var(--radio-width--medium) - 0.75rem); + height: calc(var(--radio-height--medium) - 0.75rem); + border-radius: 50%; +} +.dnb-radio--large .dnb-radio__dot { + width: calc(var(--radio-width--large) - 0.875rem); + height: calc(var(--radio-height--large) - 0.875rem); +} +.dnb-radio__input { + opacity: 0; + position: absolute; + top: auto; + left: auto; + z-index: 5; + width: var(--radio-width--medium); + height: var(--radio-height--medium); + margin: 0; + padding: 0; + border: 0; +} +.dnb-radio--large .dnb-radio__input { + width: var(--radio-width--large); + height: var(--radio-height--large); +} +.dnb-radio__input:not([disabled]) { + cursor: pointer; +} +.dnb-radio__order { + display: inline-flex; + align-items: baseline; +} +.dnb-radio-group--column .dnb-radio__order { + display: flex; +} +.dnb-radio__row { + display: inline-flex; +} +.dnb-radio__suffix { + order: 3; +} +.dnb-radio__suffix .dnb-modal__trigger { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} +.dnb-radio-group__suffix { + font-size: var(--font-size-basis); +} +.dnb-radio--large { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__suffix { + line-height: var(--radio-height--large); +} +.dnb-radio--large .dnb-radio__shell { + width: var(--radio-width--large); + height: var(--radio-height--large); +} .dnb-radio .dnb-form-label { - margin-top: 0; } - :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { - vertical-align: top; } - .dnb-radio .dnb-form-status { - order: 4; - margin-top: 0.375rem; - /* 6/16 */ - margin-bottom: 0; } - .dnb-radio + .dnb-form-status { - margin-top: 0.5rem; - margin-bottom: 1rem; } - .dnb-radio-group { - display: inline-flex; - flex-direction: row; } - .dnb-radio-group .dnb-radio { - margin-right: var(--radio-margin-right); - margin-bottom: var(--radio-margin-bottom); } - .dnb-radio-group--column .dnb-radio { - display: flex; - margin-right: 0; } - .dnb-radio-group .dnb-radio:last-of-type { - margin-right: 0; } - .dnb-radio-group [role='radiogroup'], .dnb-radio-group__shell { - display: block; } - .dnb-radio-group__shell > .dnb-form-status { - margin-top: 0; - margin-bottom: 0; } - .dnb-radio-group--column .dnb-radio-group__shell { - flex-direction: column; } - .dnb-radio-group .dnb-form-row { - align-items: flex-start; - margin-bottom: calc(1px - 1px - var(--radio-margin-bottom)); } - .dnb-radio-group .dnb-form-row::before { - font-size: var(--font-size-basis); } - .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { - border-color: var(--skeleton-color); } + margin-right: 0; + margin-left: 0; + margin-bottom: 0; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner { + order: 2; +} +.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label { + order: 1; + padding-right: 0.5rem; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner { + order: 1; +} +.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label { + order: 2; + padding-left: 0.5rem; +} +.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label { + margin-top: 0; +} +:not(.dnb-radio-group) > .dnb-form-label + .dnb-radio { + vertical-align: top; +} +.dnb-radio .dnb-form-status { + order: 4; + margin-top: 0.375rem; /* 6/16 */ + margin-bottom: 0; +} +.dnb-radio + .dnb-form-status { + margin-top: 0.5rem; + margin-bottom: 1rem; +} +.dnb-radio-group { + display: inline-flex; + flex-direction: row; +} +.dnb-radio-group .dnb-radio { + margin-right: var(--radio-margin-right); + margin-bottom: var(--radio-margin-bottom); +} +.dnb-radio-group--column .dnb-radio { + display: flex; + margin-right: 0; +} +.dnb-radio-group .dnb-radio:last-of-type { + margin-right: 0; +} +.dnb-radio-group [role=radiogroup], .dnb-radio-group__shell { + display: block; +} +.dnb-radio-group__shell > .dnb-form-status { + margin-top: 0; + margin-bottom: 0; +} +.dnb-radio-group--column .dnb-radio-group__shell { + flex-direction: column; +} +.dnb-radio-group .dnb-form-row { + align-items: flex-start; + margin-bottom: calc(0px - var(--radio-margin-bottom)); +} +.dnb-radio-group .dnb-form-row::before { + font-size: var(--font-size-basis); +} +.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { + border-color: var(--skeleton-color); +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * ToggleButton component * */ +/* + * Utilities + */ :root { --toggle-button-margin-right: 1rem; - --toggle-button-margin-bottom: 1rem; } + --toggle-button-margin-bottom: 1rem; +} .dnb-toggle-button { display: inline-flex; align-items: center; font-size: var(--font-size-small); - line-height: var(--line-height-basis); } - .dnb-toggle-button__inner { - display: inline-flex; - flex-direction: column; } - .dnb-toggle-button__shell { - position: relative; - left: 0; - user-select: none; - -webkit-user-select: none; } - .dnb-toggle-button--vertical { - flex-direction: column; - align-items: flex-start; } - .dnb-toggle-button__component { - padding-right: 0.5rem; - display: inline-flex; - align-items: center; } - .dnb-toggle-button__button.dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-toggle-button__button .dnb-checkbox { - margin-left: -0.5rem; } - .dnb-toggle-button__button .dnb-checkbox__input { - pointer-events: none; } - .dnb-toggle-button__button .dnb-checkbox__button { - display: unset; } - .dnb-toggle-button__button .dnb-checkbox__focus, .dnb-toggle-button__button .dnb-checkbox__button { - width: calc(var(--checkbox-width--medium) - 0.5rem); - height: calc(var(--checkbox-height--medium) - 0.5rem); - border-width: 0.0625rem; } - .dnb-toggle-button__button .dnb-checkbox__dot { - width: calc(var(--checkbox-width--medium) - 1rem); - height: calc(var(--checkbox-height--medium) - 1rem); } - .dnb-toggle-button__button .dnb-checkbox__gfx { - width: calc(var(--checkbox-width--medium) - 0.75rem); - height: calc(var(--checkbox-height--medium) - 0.75rem); } - .dnb-toggle-button__button .dnb-radio { - margin-left: -0.5rem; } - .dnb-toggle-button__button .dnb-radio__input { - pointer-events: none; } - .dnb-toggle-button__button .dnb-radio__focus, .dnb-toggle-button__button .dnb-radio__button { - width: calc(var(--radio-width--medium) - 0.5rem); - height: calc(var(--radio-height--medium) - 0.5rem); - border-width: 0.0625rem; } - .dnb-toggle-button__button .dnb-radio__dot { - 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 { - background-color: var(--color-emerald-green); - color: var(--color-mint-green); } - :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button { - vertical-align: top; } - .dnb-toggle-button-group__suffix { - font-size: var(--font-size-basis); } - .dnb-toggle-button .dnb-form-status { - order: 2; - margin-top: 0.5rem; } - .dnb-toggle-button .dnb-form-label { - margin-right: 1rem; } - .dnb-toggle-button-group { - display: inline-flex; } - .dnb-toggle-button-group .dnb-toggle-button { - margin-right: var(--toggle-button-margin-right); - margin-bottom: var(--toggle-button-margin-bottom); } - .dnb-toggle-button-group--column .dnb-toggle-button { - display: flex; - margin-right: 0; } - .dnb-toggle-button-group .dnb-toggle-button:last-of-type { - margin-right: 0; } - .dnb-toggle-button-group__shell { - display: flex; - flex-direction: column; } - .dnb-toggle-button-group__shell__children { - order: 1; } - .dnb-toggle-button-group__shell > .dnb-form-status { - order: 2; - transform: translateY(-0.5rem); } - .dnb-toggle-button-group .dnb-form-row { - align-items: baseline; - margin-bottom: calc(1px - 1px - var(--toggle-button-margin-bottom)); } - .dnb-toggle-button-group .dnb-form-row--vertical-label { - align-items: flex-start; } - .dnb-toggle-button-group .dnb-form-row::before { - font-size: var(--font-size-basis); } - .dnb-toggle-button-group--no-label > .dnb-alignment-helper { - line-height: var(--button-height); } - .dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper { - line-height: var(--button-height); } - @media screen and (min-width: 40em) { - .dnb-form-label + .dnb-toggle-button { - transform: translateY(-0.5rem); } } -" + line-height: var(--line-height-basis); +} +.dnb-toggle-button__inner { + display: inline-flex; + flex-direction: column; +} +.dnb-toggle-button__shell { + position: relative; + left: 0; + user-select: none; + -webkit-user-select: none; +} +.dnb-toggle-button--vertical { + flex-direction: column; + align-items: flex-start; +} +.dnb-toggle-button__component { + padding-right: 0.5rem; + display: inline-flex; + align-items: center; +} +.dnb-toggle-button__button.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-toggle-button__button .dnb-checkbox { + margin-left: -0.5rem; +} +.dnb-toggle-button__button .dnb-checkbox__input { + pointer-events: none; +} +.dnb-toggle-button__button .dnb-checkbox__button { + display: unset; +} +.dnb-toggle-button__button .dnb-checkbox__focus, .dnb-toggle-button__button .dnb-checkbox__button { + width: calc(var(--checkbox-width--medium) - 0.5rem); + height: calc(var(--checkbox-height--medium) - 0.5rem); + border-width: 0.0625rem; +} +.dnb-toggle-button__button .dnb-checkbox__dot { + width: calc(var(--checkbox-width--medium) - 1rem); + height: calc(var(--checkbox-height--medium) - 1rem); +} +.dnb-toggle-button__button .dnb-checkbox__gfx { + width: calc(var(--checkbox-width--medium) - 0.75rem); + height: calc(var(--checkbox-height--medium) - 0.75rem); +} +.dnb-toggle-button__button .dnb-radio { + margin-left: -0.5rem; +} +.dnb-toggle-button__button .dnb-radio__input { + pointer-events: none; +} +.dnb-toggle-button__button .dnb-radio__focus, .dnb-toggle-button__button .dnb-radio__button { + width: calc(var(--radio-width--medium) - 0.5rem); + height: calc(var(--radio-height--medium) - 0.5rem); + border-width: 0.0625rem; +} +.dnb-toggle-button__button .dnb-radio__dot { + 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 { + background-color: var(--color-emerald-green); + color: var(--color-mint-green); +} +:not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button { + vertical-align: top; +} +.dnb-toggle-button-group__suffix { + font-size: var(--font-size-basis); +} +.dnb-toggle-button .dnb-form-status { + order: 2; + margin-top: 0.5rem; +} +.dnb-toggle-button .dnb-form-label { + margin-right: 1rem; +} +.dnb-toggle-button-group { + display: inline-flex; +} +.dnb-toggle-button-group .dnb-toggle-button { + margin-right: var(--toggle-button-margin-right); + margin-bottom: var(--toggle-button-margin-bottom); +} +.dnb-toggle-button-group--column .dnb-toggle-button { + display: flex; + margin-right: 0; +} +.dnb-toggle-button-group .dnb-toggle-button:last-of-type { + margin-right: 0; +} +.dnb-toggle-button-group__shell { + display: flex; + flex-direction: column; +} +.dnb-toggle-button-group__shell__children { + order: 1; +} +.dnb-toggle-button-group__shell > .dnb-form-status { + order: 2; + transform: translateY(-0.5rem); +} +.dnb-toggle-button-group .dnb-form-row { + align-items: baseline; + margin-bottom: calc(0px - var(--toggle-button-margin-bottom)); +} +.dnb-toggle-button-group .dnb-form-row--vertical-label { + align-items: flex-start; +} +.dnb-toggle-button-group .dnb-form-row::before { + font-size: var(--font-size-basis); +} +.dnb-toggle-button-group--no-label > .dnb-alignment-helper { + line-height: var(--button-height); +} +.dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper { + line-height: var(--button-height); +} +@media screen and (min-width: 40em) { + .dnb-form-label + .dnb-toggle-button { + transform: translateY(-0.5rem); + } +}" `; diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap index 1b34b465915..e75dc8b9ffc 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap @@ -12,11 +12,12 @@ exports[`Tooltip scss have to match default theme snapshot 1`] = ` border-radius: 1rem; color: var(--color-white); background-color: var(--color-black-80); - box-shadow: var(--shadow-default); } - .dnb-tooltip__arrow::before { - border: 1px solid rgba(0, 0, 0, 0.1); - background-color: var(--color-black-80); } -" + box-shadow: var(--shadow-default); +} +.dnb-tooltip__arrow::before { + border: 1px solid rgba(0, 0, 0, 0.1); + background-color: var(--color-black-80); +}" `; exports[`Tooltip scss have to match snapshot 1`] = ` @@ -31,6 +32,9 @@ exports[`Tooltip scss have to match snapshot 1`] = ` * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -41,82 +45,105 @@ exports[`Tooltip scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } -" + visibility: hidden; + } +}" `; 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 210ecdbf668..c1ad474c17e 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 @@ -7,35 +7,44 @@ exports[`Upload scss have to match default theme snapshot 1`] = ` */ .dnb-upload { background-color: var(--color-white); - border-radius: 0.5rem; } - .dnb-upload__outline { - stroke: var(--color-sea-green); - border-radius: 0.5rem; - stroke-width: 0.1875rem; } - .dnb-upload--active .dnb-upload__outline { - stroke: var(--color-emerald-green); - inset: -1px; - width: calc(100% + 2px); - height: calc(100% + 2px); } - .dnb-upload--active .dnb-upload__outline rect { - stroke-width: 0.25rem; - stroke-dasharray: 0; } - .dnb-upload--active { - background-color: var(--color-pistachio); } - .dnb-upload__file-cell { - /** Highlight Animation */ - transition: background-color; - transition-duration: 1.5s; - transition-timing-function: var(--easing-default); } - .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon { - color: var(--color-fire-red); } - .dnb-upload__file-cell--highlight { - background-color: var(--color-sand-yellow); } - .dnb-upload__text.dnb-p { - color: var(--color-black-55); } - .dnb-upload__subtitle.dnb-p { - color: var(--color-black-55); } -" + border-radius: 0.5rem; +} +.dnb-upload__outline { + stroke: var(--color-sea-green); + border-radius: 0.5rem; + stroke-width: 0.1875rem; +} +.dnb-upload--active .dnb-upload__outline { + stroke: var(--color-emerald-green); + inset: -1px; + width: calc(100% + 2px); + height: calc(100% + 2px); +} +.dnb-upload--active .dnb-upload__outline rect { + stroke-width: 0.25rem; + stroke-dasharray: 0; +} +.dnb-upload--active { + background-color: var(--color-pistachio); +} +.dnb-upload__file-cell { + /** Highlight Animation */ + transition: background-color; + transition-duration: 1.5s; + transition-timing-function: var(--easing-default); +} +.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon { + color: var(--color-fire-red); +} +.dnb-upload__file-cell--highlight { + background-color: var(--color-sand-yellow); +} +.dnb-upload__text.dnb-p { + color: var(--color-black-55); +} +.dnb-upload__subtitle.dnb-p { + color: var(--color-black-55); +}" `; exports[`Upload scss have to match snapshot 1`] = ` @@ -50,10 +59,16 @@ exports[`Upload scss have to match snapshot 1`] = ` * Used for snapshot testing * */ +/* + * Utilities + */ /* * Icon component * */ +/* + * Utilities + */ .dnb-icon { display: inline-block; vertical-align: middle; @@ -61,67 +76,170 @@ exports[`Upload scss have to match snapshot 1`] = ` line-height: 1rem; color: inherit; width: 1em; - height: 1em; } - .dnb-icon img, - .dnb-icon svg { - width: inherit; - height: inherit; - shape-rendering: geometricPrecision; - vertical-align: top; } - .dnb-icon svg[width='100%'] { - width: inherit; } - .dnb-icon svg[height='100%'] { - height: inherit; } - .dnb-icon--inherit-color svg:not([fill]), - .dnb-icon--inherit-color svg [fill] { - fill: currentColor; } - .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; } - .dnb-icon--small { - font-size: 0.75rem; } - .dnb-icon--default { - font-size: 1rem; } - .dnb-icon--medium { - font-size: 1.5rem; } - .dnb-icon--large { - font-size: 2rem; } - .dnb-icon--x-large { - font-size: 2.5rem; } - .dnb-icon--xx-large { - font-size: 3rem; } - .dnb-icon--custom-size { - width: auto; - height: auto; } - .dnb-icon--auto { - font-size: 1em; } - .dnb-icon--auto > .dnb-icon--wrapper { - display: inline-flex; - align-items: center; - justify-content: center; } - h1 .dnb-icon, - h2 .dnb-icon, - h3 .dnb-icon, - h4 .dnb-icon, - h5 .dnb-icon, - h6 .dnb-icon { - vertical-align: middle; } - .dnb-icon.dnb-skeleton { - color: var(--skeleton-color) !important; } - .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { - content: none !important; } + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * Used for snapshot testing * */ +/* + * Utilities + */ +/* +* Icon component +* +*/ +/* + * Utilities + */ +.dnb-icon { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + line-height: 1rem; + color: inherit; + width: 1em; + height: 1em; +} +.dnb-icon img, +.dnb-icon svg { + width: inherit; + height: inherit; + shape-rendering: geometricPrecision; + vertical-align: top; +} +.dnb-icon svg[width="100%"] { + width: inherit; +} +.dnb-icon svg[height="100%"] { + height: inherit; +} +.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { + fill: currentColor; +} +.dnb-icon--inherit-color svg [stroke] { + stroke: currentColor; +} +.dnb-icon--small { + font-size: 0.75rem; +} +.dnb-icon--default { + font-size: 1rem; +} +.dnb-icon--medium { + font-size: 1.5rem; +} +.dnb-icon--large { + font-size: 2rem; +} +.dnb-icon--x-large { + font-size: 2.5rem; +} +.dnb-icon--xx-large { + font-size: 3rem; +} +.dnb-icon--custom-size { + width: auto; + height: auto; +} +.dnb-icon--auto { + font-size: 1em; +} +.dnb-icon--auto > .dnb-icon--wrapper { + display: inline-flex; + align-items: center; + justify-content: center; +} +h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon { + vertical-align: middle; +} +.dnb-icon.dnb-skeleton { + color: var(--skeleton-color) !important; +} +.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { + content: none !important; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ /* * Tooltip component * */ +/* + * Utilities + */ .dnb-tooltip { position: absolute; z-index: 3100; @@ -132,156 +250,205 @@ exports[`Upload scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms var(--easing-default); } - .dnb-tooltip--large { - padding: 0.25rem 1rem; } - .dnb-tooltip--animate_position { - transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); } - .dnb-tooltip--active { - visibility: visible; - /* - because of the first "show" we also use animation - also, use forwards because of the usage of visibility - */ - animation: show-tooltip 200ms var(--easing-default) forwards; } - html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms var(--easing-default) forwards; } - .dnb-tooltip--hide { - visibility: visible; - animation: hide-tooltip 200ms var(--easing-default) forwards; } - .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms linear forwards; } - .dnb-tooltip--fixed { - position: fixed; } - html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms linear 1s forwards; } - .dnb-tooltip__portal { - position: absolute; - top: 0; - left: 0; - right: 0; } - .dnb-tooltip__content { - min-width: 2rem; - min-height: 1.5rem; - padding: 0; } - .dnb-tooltip__arrow { - position: absolute; - pointer-events: none; - margin: 0; - width: 1rem; - height: 0.5rem; - overflow: hidden; } - .dnb-tooltip__arrow::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 1rem; - height: 1rem; - transform: translateY(70%) rotate(45deg); } - .dnb-tooltip__arrow__position--bottom { - top: -0.5rem; } - .dnb-tooltip__arrow__position--top { - bottom: -0.5rem; - transform: rotate(180deg); } - .dnb-tooltip__arrow__position--left { - right: -0.75rem; - margin-right: 3px; - transform: rotate(90deg); } - .dnb-tooltip__arrow__position--right { - left: -0.75rem; - margin-left: 3px; - transform: rotate(270deg); } - .dnb-tooltip__arrow__arrow--left { - align-self: flex-start; } - .dnb-tooltip__arrow__arrow--right { - align-self: flex-end; } + transition: opacity 200ms var(--easing-default); +} +.dnb-tooltip--large { + padding: 0.25rem 1rem; +} +.dnb-tooltip--animate_position { + transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); +} +.dnb-tooltip--active { + visibility: visible; + /* + because of the first "show" we also use animation + also, use forwards because of the usage of visibility + */ + animation: show-tooltip 200ms var(--easing-default) forwards; +} +html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { + animation: show-tooltip 1ms var(--easing-default) forwards; +} +.dnb-tooltip--hide { + visibility: visible; + animation: hide-tooltip 200ms var(--easing-default) forwards; +} +.dnb-tooltip--hide.dnb-tooltip--no-animation { + animation: hide-tooltip 1ms linear forwards; +} +.dnb-tooltip--fixed { + position: fixed; +} +html[data-visual-test] .dnb-tooltip--hide { + animation: hide-tooltip 1ms linear 1s forwards; +} +.dnb-tooltip__portal { + position: absolute; + top: 0; + left: 0; + right: 0; +} +.dnb-tooltip__content { + min-width: 2rem; + min-height: 1.5rem; + padding: 0; +} +.dnb-tooltip__arrow { + position: absolute; + pointer-events: none; + margin: 0; + width: 1rem; + height: 0.5rem; + overflow: hidden; +} +.dnb-tooltip__arrow::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 1rem; + height: 1rem; + transform: translateY(70%) rotate(45deg); +} +.dnb-tooltip__arrow__position--bottom { + top: -0.5rem; +} +.dnb-tooltip__arrow__position--top { + bottom: -0.5rem; + transform: rotate(180deg); +} +.dnb-tooltip__arrow__position--left { + right: -0.75rem; + margin-right: 3px; + transform: rotate(90deg); +} +.dnb-tooltip__arrow__position--right { + left: -0.75rem; + margin-left: 3px; + transform: rotate(270deg); +} +.dnb-tooltip__arrow__arrow--left { + align-self: flex-start; +} +.dnb-tooltip__arrow__arrow--right { + align-self: flex-end; +} @keyframes show-tooltip { from { - opacity: 0; } + opacity: 0; + } to { - opacity: 1; } } - + opacity: 1; + } +} @keyframes hide-tooltip { from { - opacity: 1; } + opacity: 1; + } to { opacity: 0; - visibility: hidden; } } - + visibility: hidden; + } +} /* * Used for snapshot testing * */ +/* + * Utilities + */ /* * FormStatus component * */ +/* + * Utilities + */ :root { - --form-status-radius: 0.25rem; } + --form-status-radius: 0.25rem; +} .dnb-form-status { display: flex; opacity: 1; - transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); } - .dnb-form-status--hidden { - will-change: height, opacity, margin, padding; - width: 0; - height: 0; - opacity: 0; } - .dnb-form-status--is-animating { - overflow: hidden; - width: auto; } - .dnb-form-status--disappear, .dnb-form-status--hidden { - margin: 0 !important; - padding: 0 !important; } - .dnb-form-status__shell { - display: flex; - justify-content: flex-start; - align-items: flex-start; - min-width: inherit; - border-radius: var(--form-status-radius); } - .dnb-form-status__text { - padding: 0.625rem 1rem; - cursor: text; - color: inherit; - line-height: var(--line-height-small); - font-size: var(--font-size-small); - white-space: normal; } - button .dnb-form-status__text { - cursor: inherit; } - .dnb-form-status__text .dnb-anchor { - font-size: inherit; } - .dnb-icon + .dnb-form-status__text { - padding-left: 0.5rem; } - .dnb-form-status__shell > .dnb-icon { - display: flex; - justify-content: center; - align-items: center; - margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; } - .dnb-form-status__size--large .dnb-form-status__text { - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { - margin-top: 0.6666666em; - margin-bottom: 0.6666666em; } - .dnb-form-status--stretch { - flex-grow: 1; } - .dnb-form-status--stretch .dnb-form-status__shell { - width: 100%; } - .dnb-form-status--stretch .dnb-form-status__text { - max-width: 47rem; } - .dnb-form-status[hidden] { - display: none; } - .dnb-form-status--no-animation, - html[data-visual-test] .dnb-form-status { - transition-duration: 1ms !important; } + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Button component * */ +/* + * Utilities + */ :root { --button-font-size: var(--font-size-basis); --button-font-size-small: var(--font-size-small); @@ -299,7 +466,8 @@ exports[`Upload scss have to match snapshot 1`] = ` --button-border-radius: calc(var(--button-height) / 2); --button-border-radius--small: calc(var(--button-height--small) / 2); --button-border-radius--medium: calc(var(--button-height--medium) / 2); - --button-border-radius--large: calc(var(--button-height--large) / 2); } + --button-border-radius--large: calc(var(--button-height--large) / 2); +} .dnb-button { position: relative; @@ -317,210 +485,360 @@ exports[`Upload scss have to match snapshot 1`] = ` border-radius: var(--button-border-radius); text-decoration: none; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-button--wrap { - overflow-wrap: break-word; - white-space: normal; } - .dnb-button, - .dnb-core-style .dnb-button { - line-height: var(--button-height); } - .dnb-button__text { - margin: 0.5rem 0; - font-size: var(--button-font-size); - line-height: var(--line-height-basis); - color: inherit; - transform: translateY(-0.03125rem); } - .dnb-button__text [data-os='linux'] { - transform: translateY(-0.035rem); } - .dnb-button__alignment { - display: inline-block; - width: 0; } - .dnb-button__bounding { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - transform: scale(1.1, 1.4); - background-color: transparent; - border-radius: var(--button-border-radius); } - .dnb-button--has-text { - padding-left: 1.5rem; - padding-right: 1.5rem; } - .dnb-button--size-small { - width: var(--button-width--small); - font-size: var(--button-font-size-small); - border-radius: var(--button-border-radius--small); } - .dnb-button--size-small, - .dnb-core-style .dnb-button--size-small { - line-height: var(--button-height--small); } - .dnb-button--size-small .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-small { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { - padding-right: 0.5rem; } - .dnb-button--size-medium { - width: var(--button-width--medium); - border-radius: var(--button-border-radius--medium); } - .dnb-button--size-medium, - .dnb-core-style .dnb-button--size-medium { - line-height: var(--button-height--medium); } - .dnb-button--size-medium .dnb-button__text { - margin: 0; } - .dnb-button--has-text.dnb-button--size-medium { - padding-left: 1rem; - padding-right: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { - padding-right: 0.5rem; } - .dnb-button--size-large { - width: var(--button-width--large); - border-radius: var(--button-border-radius--large); } - .dnb-button--size-large, - .dnb-core-style .dnb-button--size-large { - line-height: var(--button-height--large); } - .dnb-button--has-text.dnb-button--size-large { - padding-left: 2rem; - padding-right: 2rem; } - .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { - padding-left: 1rem; } - .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { - padding-right: 1rem; } - .dnb-button--has-text { - width: auto; } - .dnb-button--has-text .dnb-button__icon { - margin: 0 calc(var(--button-icon-size) / 2); } - .dnb-button--has-text.dnb-button--icon-position-left { - padding-left: 0.5rem; } - .dnb-button--has-text.dnb-button--icon-position-right { - padding-right: 0.5rem; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { - order: 2; } - .dnb-button--has-text.dnb-button--has-icon .dnb-button__text { - order: 1; } - .dnb-button:not(.dnb-button--has-text) .dnb-button__icon { - width: inherit; } - .dnb-button__icon.dnb-icon svg:not([width]):not([height]) { - width: var(--button-icon-size); - height: var(--button-icon-size); } - [href] > .dnb-button__icon.dnb-icon { - line-height: var(--button-font-size); } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { - order: 1; } - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, - .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { - order: 2; } - .dnb-button--stretch { - width: 100%; } - .dnb-button--reset { - margin: 0; - padding: 0; - width: auto; - height: auto; - overflow: visible; - border: none; - border-radius: 0; - background-color: transparent; - appearance: none; - box-shadow: none; - color: inherit; - font: inherit; - text-align: inherit; - line-height: inherit; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) { - box-shadow: none; - border: none; } - .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { - outline: none; } - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, - html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { - box-shadow: none; - color: inherit; - border: none; } - .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } - .dnb-button[disabled] { - cursor: not-allowed; - outline: none; } - .dnb-form-row--vertical .dnb-form-row__content > .dnb-button { - align-self: flex-start; } - .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { - white-space: nowrap; } - .dnb-button + .dnb-form-status { - margin-top: 0.5rem; } + /* stylelint-disable-next-line */ +} +.dnb-button--wrap { + overflow-wrap: break-word; + white-space: normal; +} +.dnb-button, .dnb-core-style .dnb-button { + line-height: var(--button-height); +} +.dnb-button__text { + margin: 0.5rem 0; + font-size: var(--button-font-size); + line-height: var(--line-height-basis); + color: inherit; + transform: translateY(-0.03125rem); +} +.dnb-button__text [data-os=linux] { + transform: translateY(-0.035rem); +} +.dnb-button__alignment { + display: inline-block; + width: 0; +} +.dnb-button__bounding { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + transform: scale(1.1, 1.4); + background-color: transparent; + border-radius: var(--button-border-radius); +} +.dnb-button--has-text { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.dnb-button--size-small { + width: var(--button-width--small); + font-size: var(--button-font-size-small); + border-radius: var(--button-border-radius--small); +} +.dnb-button--size-small, .dnb-core-style .dnb-button--size-small { + line-height: var(--button-height--small); +} +.dnb-button--size-small .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-small { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small { + padding-right: 0.5rem; +} +.dnb-button--size-medium { + width: var(--button-width--medium); + border-radius: var(--button-border-radius--medium); +} +.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium { + line-height: var(--button-height--medium); +} +.dnb-button--size-medium .dnb-button__text { + margin: 0; +} +.dnb-button--has-text.dnb-button--size-medium { + padding-left: 1rem; + padding-right: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium { + padding-right: 0.5rem; +} +.dnb-button--size-large { + width: var(--button-width--large); + border-radius: var(--button-border-radius--large); +} +.dnb-button--size-large, .dnb-core-style .dnb-button--size-large { + line-height: var(--button-height--large); +} +.dnb-button--has-text.dnb-button--size-large { + padding-left: 2rem; + padding-right: 2rem; +} +.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large { + padding-left: 1rem; +} +.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large { + padding-right: 1rem; +} +.dnb-button--has-text { + width: auto; +} +.dnb-button--has-text .dnb-button__icon { + margin: 0 calc(var(--button-icon-size) / 2); +} +.dnb-button--has-text.dnb-button--icon-position-left { + padding-left: 0.5rem; +} +.dnb-button--has-text.dnb-button--icon-position-right { + padding-right: 0.5rem; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon { + order: 2; +} +.dnb-button--has-text.dnb-button--has-icon .dnb-button__text { + order: 1; +} +.dnb-button:not(.dnb-button--has-text) .dnb-button__icon { + width: inherit; +} +.dnb-button__icon.dnb-icon svg:not([width]):not([height]) { + width: var(--button-icon-size); + height: var(--button-icon-size); +} +[href] > .dnb-button__icon.dnb-icon { + line-height: var(--button-font-size); +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon { + order: 1; +} +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *, +.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text { + order: 2; +} +.dnb-button--stretch { + width: 100%; +} +.dnb-button--reset { + margin: 0; + padding: 0; + width: auto; + height: auto; + overflow: visible; + border: none; + border-radius: 0; + background-color: transparent; + appearance: none; + box-shadow: none; + color: inherit; + font: inherit; + text-align: inherit; + line-height: inherit; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) { + box-shadow: none; + border: none; +} +.dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active { + outline: none; +} +html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active { + box-shadow: none; + color: inherit; + border: none; +} +.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.dnb-button[disabled] { + cursor: not-allowed; + outline: none; +} +.dnb-form-row--vertical .dnb-form-row__content > .dnb-button { + align-self: flex-start; +} +.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text { + white-space: nowrap; +} +.dnb-button + .dnb-form-status { + margin-top: 0.5rem; +} /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { - border: none; } + border: none; +} + +/* +* Used for snapshot testing +* +*/ +/* + * Utilities + */ +/* + * FormStatus component + * + */ +/* + * Utilities + */ +:root { + --form-status-radius: 0.25rem; +} + +.dnb-form-status { + display: flex; + opacity: 1; + transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); +} +.dnb-form-status--hidden { + will-change: height, opacity, margin, padding; + width: 0; + height: 0; + opacity: 0; +} +.dnb-form-status--is-animating { + overflow: hidden; + width: auto; +} +.dnb-form-status--disappear, .dnb-form-status--hidden { + margin: 0 !important; + padding: 0 !important; +} +.dnb-form-status__shell { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-width: inherit; + border-radius: var(--form-status-radius); +} +.dnb-form-status__text { + padding: 0.625rem 1rem; + cursor: text; + color: inherit; + line-height: var(--line-height-small); + font-size: var(--font-size-small); + white-space: normal; +} +button .dnb-form-status__text { + cursor: inherit; +} +.dnb-form-status__text .dnb-anchor { + font-size: inherit; +} +.dnb-icon + .dnb-form-status__text { + padding-left: 0.5rem; +} +.dnb-form-status__shell > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; +} +.dnb-form-status__size--large .dnb-form-status__text { + padding-top: 1.125rem; + padding-bottom: 1.125rem; +} +.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon { + margin-top: 0.6666666em; + margin-bottom: 0.6666666em; +} +.dnb-form-status--stretch { + flex-grow: 1; +} +.dnb-form-status--stretch .dnb-form-status__shell { + width: 100%; +} +.dnb-form-status--stretch .dnb-form-status__text { + max-width: 47rem; +} +.dnb-form-status[hidden] { + display: none; +} +.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { + transition-duration: 1ms !important; +} /* * Upload component * */ +/* + * Utilities + */ .dnb-upload { display: flex; flex-direction: column; position: relative; padding: var(--spacing-medium); - background-color: var(--color-white); } - @media screen and (max-width: 40em) { - .dnb-upload { - padding: var(--spacing-medium) var(--spacing-small); } } - .dnb-upload__outline { - content: ''; - pointer-events: none; - position: absolute; - inset: 0; - height: 100%; - width: 100%; } - .dnb-upload__file-input { - position: absolute; - visibility: hidden; } - .dnb-upload__file-list { - position: relative; - padding: 0; - margin-top: var(--spacing-medium); - margin-bottom: 0; - list-style: none; } - .dnb-upload__file-list::before, .dnb-upload__file-cell::after { - content: ''; - position: absolute; - inset: 0; - height: 1px; - background-color: var(--color-black-8); } - .dnb-upload__file-cell { - position: relative; - padding: var(--spacing-small) 0; } - .dnb-upload__file-cell::after { - top: auto; } - .dnb-upload__file-cell__content { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; } - .dnb-upload__file-cell__content__left { - display: flex; - flex-direction: row; - align-items: center; } - .dnb-upload__file-cell__text-container { - display: flex; - flex-direction: column; - margin-left: var(--spacing-small); } - .dnb-upload__file-cell__text-container--loading { - font-size: var(--font-size-basis); } -" + background-color: var(--color-white); +} +@media screen and (max-width: 40em) { + .dnb-upload { + padding: var(--spacing-medium) var(--spacing-small); + } +} +.dnb-upload__outline { + content: ""; + pointer-events: none; + position: absolute; + inset: 0; + height: 100%; + width: 100%; +} +.dnb-upload__file-input { + position: absolute; + visibility: hidden; +} +.dnb-upload__file-list { + position: relative; + padding: 0; + margin-top: var(--spacing-medium); + margin-bottom: 0; + list-style: none; +} +.dnb-upload__file-list::before, .dnb-upload__file-cell::after { + content: ""; + position: absolute; + inset: 0; + height: 1px; + background-color: var(--color-black-8); +} +.dnb-upload__file-cell { + position: relative; + padding: var(--spacing-small) 0; +} +.dnb-upload__file-cell::after { + top: auto; +} +.dnb-upload__file-cell__content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.dnb-upload__file-cell__content__left { + display: flex; + flex-direction: row; + align-items: center; +} +.dnb-upload__file-cell__text-container { + display: flex; + flex-direction: column; + margin-left: var(--spacing-small); +} +.dnb-upload__file-cell__text-container--loading { + font-size: var(--font-size-basis); +}" `; 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 abc5d2e5cae..6a2802c445e 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 @@ -12,6 +12,9 @@ exports[`VisuallyHidden VisuallyHidden scss have to match snapshot 1`] = ` * VisuallyHidden component * */ +/* + * Utilities + */ .dnb-visually-hidden--focusable:not(:focus):not(:focus-within) { user-select: none; -webkit-touch-callout: none; @@ -24,6 +27,6 @@ exports[`VisuallyHidden VisuallyHidden scss have to match snapshot 1`] = ` white-space: nowrap; padding: 0; margin: 0; - border: 0; } -" + border: 0; +}" `; diff --git a/packages/dnb-eufemia/src/core/jest/jestSetup.js b/packages/dnb-eufemia/src/core/jest/jestSetup.js index 2a7571bbe09..5148ebb7477 100644 --- a/packages/dnb-eufemia/src/core/jest/jestSetup.js +++ b/packages/dnb-eufemia/src/core/jest/jestSetup.js @@ -8,9 +8,8 @@ import fakeProps from 'react-fake-props' import { mount, render } from './enzyme' import ReactDOMServer from 'react-dom/server' import fs from 'fs-extra' -import onceImporter from 'node-sass-once-importer' import path from 'path' -import sass from 'node-sass' +import sass from 'sass' import { toBeType } from 'jest-tobetype' import toJson from 'enzyme-to-json' @@ -28,12 +27,25 @@ expect.extend(toHaveNoViolations) export const loadScss = (file, options = {}) => { try { + const before = window.location + + const importPath1 = path.dirname(file) + const importPath2 = path.resolve(__dirname, '../../style/core/') + + delete window.location + window.location = { + href: 'file://', + } + const sassResult = sass.renderSync({ file, - includePaths: [path.resolve(__dirname, '../../style/core/')], - importer: [onceImporter()], + includePaths: [importPath1, importPath2], // use loadPaths for new API + sourceMap: false, ...options, }) + + window.location = before + return String(sassResult.css) } catch (e) { console.error('loadScss error:', e) 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 0fc49f9178f..abb4d57f220 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 @@ -342,8 +342,7 @@ exports[`PaymentCard scss have to match default theme snapshot 1`] = ` "/* * PaymentCard theme * -*/ -" +*/" `; exports[`PaymentCard scss have to match snapshot 1`] = ` @@ -358,6 +357,9 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` * PaymentCard component * */ +/* + * Utilities + */ :root { --dnb-payment-bg-default: linear-gradient( 184.55deg, @@ -399,156 +401,189 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` 184.55deg, #2cc48e 6.31%, var(--color-summer-green) 82.66% - ); } + ); +} .dnb-payment-card { - margin: 0; } - .dnb-payment-card__card { - position: relative; - width: 85.6mm; - height: 53.98mm; - 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); - color: var(--color-white); - box-shadow: var(--shadow-default); - background: var(--color-sea-green); - transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; - /* White, Youth, MyFirst */ } - .dnb-payment-card__card--design-default { - background: var(--dnb-payment-bg-default); - color: var(--color-white); } - .dnb-payment-card__card--design-pluss { - background: var(--dnb-payment-bg-pluss); - color: var(--color-white); } - .dnb-payment-card__card--design-white { - background: var(--dnb-payment-bg-white); - color: var(--color-black-80); } - .dnb-payment-card__card--design-silver { - background: var(--dnb-payment-bg-silver); - color: var(--color-black-80); } - .dnb-payment-card__card--design-gold { - background: var(--dnb-payment-bg-gold); - color: var(--color-white); } - .dnb-payment-card__card--design-saga { - background: var(--dnb-payment-bg-saga); - color: var(--color-white); } - .dnb-payment-card__card--design-private { - background: var(--color-black-80); - color: var(--color-white); } - .dnb-payment-card__card--design-black { - background: var(--color-black); - color: var(--color-white); } - .dnb-payment-card__card--design-business-no-visa { - background: var(--dnb-payment-bg-business-no-visa); - color: var(--color-white); } - .dnb-payment-card__card--design-business-with-visa { - background: var(--dnb-payment-bg-business-with-visa); - color: var(--color-white); } - .dnb-payment-card__card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: radial-gradient(farthest-corner at 80% 30%, #f7f6e61f 0%, #06060600 60%, #06060600 99%); - border-radius: inherit; } - .dnb-payment-card__card__content { - display: flex; - height: 100%; - width: 100%; - position: relative; } - .dnb-payment-card__card__wrapper { - position: absolute; - bottom: 0; - left: 0; } - .dnb-spacing .dnb-payment-card__card .dnb-p { - margin-bottom: 0 !important; } - .dnb-payment-card__card__holder { - text-transform: uppercase; - text-align: left; - opacity: 0.5; } - .dnb-payment-card__card__holder.dnb-p { - font-size: 0.625rem; } - .dnb-payment-card__card__numbers { - font-size: var(--font-size-medium); } - .dnb-payment-card__card__credit-type { - height: 51px; - position: absolute; - bottom: 0; - right: 0; } - .dnb-payment-card__card__bank-logo { - position: absolute; - top: 0; - left: 0; } - .dnb-payment-card__card__product-type { - height: 45px; - position: absolute; - top: 0; - right: 0; } - .dnb-payment-card__blocking__overlay { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - border-radius: inherit; - display: flex; - justify-content: center; - align-items: center; - background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%); } - .dnb-payment-card__blocking__center { - width: 77px; - height: 77px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: var(--color-black-80); - color: var(--color-sand-yellow); - border-radius: 4px; } - .dnb-payment-card__blocking svg { - shape-rendering: geometricPrecision; } - .dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder { - opacity: 1; } - .dnb-payment-card--compact .dnb-payment-card__card { - padding: 0; - height: 32.8mm; - border-radius: 3.48mm 3.48mm 0 0; - box-shadow: var(--shadow-default); } - .dnb-payment-card--compact .dnb-payment-card__card__top { - position: absolute; - top: 4mm; - left: 6mm; - right: 6mm; } - .dnb-payment-card--compact .dnb-payment-card__card__bottom { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 14mm; - background-color: var(--color-white); } - .dnb-payment-card--compact .dnb-payment-card__card__wrapper { - padding: 1.5mm 6mm; - color: var(--color-black-80); } - .dnb-payment-card--compact .dnb-payment-card__card__numbers { - font-size: var(--font-size-basis); } - .dnb-payment-card--compact .dnb-payment-card__card__credit-type { - top: 0; - bottom: auto; } - .dnb-payment-card--compact .dnb-payment-card__blocking__center { - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; - height: 100%; - width: 100%; - background: rgba(0, 0, 0, 0.739); - border-radius: inherit; } -" + margin: 0; +} +.dnb-payment-card__card { + position: relative; + width: 85.6mm; + height: 53.98mm; + 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); + color: var(--color-white); + box-shadow: var(--shadow-default); + background: var(--color-sea-green); + transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; + /* White, Youth, MyFirst */ +} +.dnb-payment-card__card--design-default { + background: var(--dnb-payment-bg-default); + color: var(--color-white); +} +.dnb-payment-card__card--design-pluss { + background: var(--dnb-payment-bg-pluss); + color: var(--color-white); +} +.dnb-payment-card__card--design-white { + background: var(--dnb-payment-bg-white); + color: var(--color-black-80); +} +.dnb-payment-card__card--design-silver { + background: var(--dnb-payment-bg-silver); + color: var(--color-black-80); +} +.dnb-payment-card__card--design-gold { + background: var(--dnb-payment-bg-gold); + color: var(--color-white); +} +.dnb-payment-card__card--design-saga { + background: var(--dnb-payment-bg-saga); + color: var(--color-white); +} +.dnb-payment-card__card--design-private { + background: var(--color-black-80); + color: var(--color-white); +} +.dnb-payment-card__card--design-black { + background: var(--color-black); + color: var(--color-white); +} +.dnb-payment-card__card--design-business-no-visa { + background: var(--dnb-payment-bg-business-no-visa); + color: var(--color-white); +} +.dnb-payment-card__card--design-business-with-visa { + background: var(--dnb-payment-bg-business-with-visa); + color: var(--color-white); +} +.dnb-payment-card__card::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: radial-gradient(farthest-corner at 80% 30%, rgba(247, 246, 230, 0.1215686275) 0%, rgba(6, 6, 6, 0) 60%, rgba(6, 6, 6, 0) 99%); + border-radius: inherit; +} +.dnb-payment-card__card__content { + display: flex; + height: 100%; + width: 100%; + position: relative; +} +.dnb-payment-card__card__wrapper { + position: absolute; + bottom: 0; + left: 0; +} +.dnb-spacing .dnb-payment-card__card .dnb-p { + margin-bottom: 0 !important; +} +.dnb-payment-card__card__holder { + text-transform: uppercase; + text-align: left; + opacity: 0.5; +} +.dnb-payment-card__card__holder.dnb-p { + font-size: 0.625rem; +} +.dnb-payment-card__card__numbers { + font-size: var(--font-size-medium); +} +.dnb-payment-card__card__credit-type { + height: 51px; + position: absolute; + bottom: 0; + right: 0; +} +.dnb-payment-card__card__bank-logo { + position: absolute; + top: 0; + left: 0; +} +.dnb-payment-card__card__product-type { + height: 45px; + position: absolute; + top: 0; + right: 0; +} +.dnb-payment-card__blocking__overlay { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: inherit; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%); +} +.dnb-payment-card__blocking__center { + width: 77px; + height: 77px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background: var(--color-black-80); + color: var(--color-sand-yellow); + border-radius: 4px; +} +.dnb-payment-card__blocking svg { + shape-rendering: geometricPrecision; +} +.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder { + opacity: 1; +} +.dnb-payment-card--compact .dnb-payment-card__card { + padding: 0; + height: 32.8mm; + border-radius: 3.48mm 3.48mm 0 0; + box-shadow: var(--shadow-default); +} +.dnb-payment-card--compact .dnb-payment-card__card__top { + position: absolute; + top: 4mm; + left: 6mm; + right: 6mm; +} +.dnb-payment-card--compact .dnb-payment-card__card__bottom { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 14mm; + background-color: var(--color-white); +} +.dnb-payment-card--compact .dnb-payment-card__card__wrapper { + padding: 1.5mm 6mm; + color: var(--color-black-80); +} +.dnb-payment-card--compact .dnb-payment-card__card__numbers { + font-size: var(--font-size-basis); +} +.dnb-payment-card--compact .dnb-payment-card__card__credit-type { + top: 0; + bottom: auto; +} +.dnb-payment-card--compact .dnb-payment-card__blocking__center { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.739); + 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 fe1cd5ad721..1ce17973bd9 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 @@ -816,166 +816,198 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` */ :root { --drawer-list-options-border-radius: 0.25rem; - --drawer-list-option-border-width: 0.0625rem; } + --drawer-list-option-border-width: 0.0625rem; +} .dnb-drawer-list { - color: var(--color-emerald-green); } - .dnb-drawer-list__list { - box-shadow: var(--shadow-default); - background-color: var(--color-white); - border-radius: calc( var(--drawer-list-options-border-radius) + 0.15rem); } - .dnb-drawer-list__options { - border: none; - background-color: var(--color-white); - border-radius: calc( var(--drawer-list-options-border-radius) + 0.15rem); } - .dnb-drawer-list__options:focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-drawer-list__options:focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-drawer-list__options--focusring { - outline: none; } - html[data-whatinput='mouse'] .dnb-drawer-list__options--focusring { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-drawer-list__option { - position: relative; + color: var(--color-emerald-green); +} +.dnb-drawer-list__list { + box-shadow: var(--shadow-default); + background-color: var(--color-white); + border-radius: calc(var(--drawer-list-options-border-radius) + 0.15rem); +} +.dnb-drawer-list__options { + border: none; + background-color: var(--color-white); + border-radius: calc(var(--drawer-list-options-border-radius) + 0.15rem); +} +.dnb-drawer-list__options:focus { + outline: none; +} +html[data-whatinput=keyboard] .dnb-drawer-list__options:focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-drawer-list__options--focusring { + outline: none; +} +html[data-whatinput=mouse] .dnb-drawer-list__options--focusring { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-drawer-list__option { + position: relative; + color: var(--color-black-80); + background-color: var(--color-white); +} +.dnb-drawer-list__option.ignore-events { + pointer-events: none; +} +.dnb-drawer-list__option__inner::before { + pointer-events: none; + content: ""; + position: absolute; + z-index: 2; + top: auto; + left: 0; + right: 0; + bottom: 0; + height: var(--drawer-list-option-border-width); + background-color: var(--color-mint-green-25); +} +.dnb-drawer-list__option__item.item-nr-1 { + font-weight: var(--font-weight-medium); +} +.dnb-drawer-list__option__inner { + background-color: var(--color-white); +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled]) { + background-color: var(--color-mint-green-12); +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled]) .dnb-drawer-list__option__inner { + color: var(--color-sea-green); + background-color: var(--color-mint-green-12); +} +.dnb-drawer-list__option:active[disabled], html:not([data-whatintent=touch]) .dnb-drawer-list__option:active[disabled] { + cursor: not-allowed; +} +.dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner, html:not([data-whatintent=touch]) .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner { + color: var(--color-black); +} +.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { + z-index: 3; + top: var(--drawer-list-focus-border-width); + left: var(--drawer-list-focus-border-width); + right: var(--drawer-list-focus-border-width); + bottom: var(--drawer-list-focus-border-width); + height: auto; + background-color: transparent; + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); + border-color: transparent; +} +.dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner { + color: var(--color-black-80); + background-color: var(--color-white); +} +.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner { + color: var(--color-white); + background-color: var(--color-emerald-green); +} +.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner .dnb-drawer-list__option__inner { + color: inherit; + background-color: inherit; +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover[disabled] { + cursor: not-allowed; +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) { + color: var(--color-white); + background-color: var(--color-emerald-green); +} +html:not([data-whatintent=touch]) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) .dnb-drawer-list__option__inner { + color: inherit; + background-color: inherit; +} +.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after { + content: ""; + grid-column: 2; + grid-row: 1/-1; + justify-self: end; + align-self: center; + width: 1rem; + height: 1rem; + background-size: cover; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); +} +.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before { + visibility: hidden; +} +@media screen and (min-width: 40em) { + .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix { + z-index: 2; + background-color: inherit; + } + .dnb-drawer-list__option:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__suffix.dnb-drawer-list__option__item:nth-of-type(n + 2) { color: var(--color-black-80); - background-color: var(--color-white); } - .dnb-drawer-list__option.ignore-events { - pointer-events: none; } - .dnb-drawer-list__option__inner::before { - pointer-events: none; - content: ''; - position: absolute; - z-index: 2; - top: auto; - left: 0; - right: 0; - bottom: 0; - height: var(--drawer-list-option-border-width); - background-color: var(--color-mint-green-25); } - .dnb-drawer-list__option__item.item-nr-1 { - font-weight: var(--font-weight-medium); } - .dnb-drawer-list__option__inner { - background-color: var(--color-white); } - html:not([data-whatintent='touch']) .dnb-drawer-list__option:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-drawer-list__option:hover:not([disabled]) { - background-color: var(--color-mint-green-12); } - html:not([data-whatintent='touch']) .dnb-drawer-list__option:hover:not([disabled]) .dnb-drawer-list__option__inner { - color: var(--color-sea-green); - background-color: var(--color-mint-green-12); } - .dnb-drawer-list__option:active[disabled], - html:not([data-whatintent='touch']) .dnb-drawer-list__option:active[disabled] { - cursor: not-allowed; } - .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner, - html:not([data-whatintent='touch']) .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner { - color: var(--color-black); } - .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { - z-index: 3; - top: var(--drawer-list-focus-border-width); - left: var(--drawer-list-focus-border-width); - right: var(--drawer-list-focus-border-width); - bottom: var(--drawer-list-focus-border-width); - height: auto; - background-color: transparent; - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); - border-color: transparent; } - .dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner { - color: var(--color-black-80); - background-color: var(--color-white); } - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner { - color: var(--color-white); - background-color: var(--color-emerald-green); } - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner .dnb-drawer-list__option__inner { - color: inherit; - background-color: inherit; } - html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover[disabled] { - cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) { - color: var(--color-white); - background-color: var(--color-emerald-green); } - html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) .dnb-drawer-list__option__inner { - color: inherit; - background-color: inherit; } - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after { - content: ''; - grid-column: 2; - grid-row: 1 / -1; - justify-self: end; - align-self: center; - width: 1rem; - height: 1rem; - background-size: cover; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); } - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before { - visibility: hidden; } - @media screen and (min-width: 40em) { - .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix { - z-index: 2; - background-color: inherit; } - .dnb-drawer-list__option:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__suffix.dnb-drawer-list__option__item:nth-of-type(n + 2) { - color: var(--color-black-80); } } - html[data-whatinput='keyboard'] -.dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { - visibility: visible; - --border-color: var(--color-mint-green); - box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); - border-color: transparent; } - .dnb-drawer-list__option--focus:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__inner { - color: var(--color-sea-green); - background-color: var(--color-mint-green-12); } - .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner, - .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner::before { - border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } - .dnb-drawer-list__option.last-of-type, - .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner, - .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner::before { - border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } - .dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { - content: none; } - .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { - --border-color: var(--color-white); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-drawer-list--scroll .dnb-drawer-list__option:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { - left: 0.5rem; - right: 0.5rem; } - .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before { - border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } - .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before { - border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } - .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before { - border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } - .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before { - border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } - .dnb-drawer-list__status--error:not(.dnb-drawer-list--opened) .dnb-drawer-list__icon { - color: var(--color-fire-red); } - .dnb-drawer-list__triangle::before { - border: none; - background-color: var(--color-white); - box-shadow: var(--shadow-default); } - .dnb-drawer-list--top .dnb-drawer-list__option.last-of-type:hover ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--bottom .dnb-drawer-list__option.first-of-type:hover ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top:hover ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom:hover ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top.dnb-drawer-list__option--focus ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom.dnb-drawer-list__option--focus ~ .dnb-drawer-list__triangle::before { - background-color: var(--color-mint-green-12); } - .dnb-drawer-list--bottom .dnb-drawer-list__option.first-of-type.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--top .dnb-drawer-list__option.last-of-type.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, - .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before { - background-color: var(--color-emerald-green); } - .dnb-drawer-list > .dnb-form-status { - transform: translateY(-0.4375rem); } -" + } +} +html[data-whatinput=keyboard] .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { + visibility: visible; + --border-color: var(--color-mint-green); + box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); + border-color: transparent; +} +.dnb-drawer-list__option--focus:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__inner { + color: var(--color-sea-green); + background-color: var(--color-mint-green-12); +} +.dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner::before { + border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; +} +.dnb-drawer-list__option.last-of-type, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner::before { + border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); +} +.dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { + content: none; +} +.dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { + outline: none; +} +html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { + --border-color: var(--color-white); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-drawer-list--scroll .dnb-drawer-list__option:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { + left: 0.5rem; + right: 0.5rem; +} +.dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before { + border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; +} +.dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before { + border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); +} +.dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before { + border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); +} +.dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before { + border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; +} +.dnb-drawer-list__status--error:not(.dnb-drawer-list--opened) .dnb-drawer-list__icon { + color: var(--color-fire-red); +} +.dnb-drawer-list__triangle::before { + border: none; + background-color: var(--color-white); + box-shadow: var(--shadow-default); +} +.dnb-drawer-list--top .dnb-drawer-list__option.last-of-type:hover ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--bottom .dnb-drawer-list__option.first-of-type:hover ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top:hover ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom:hover ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top.dnb-drawer-list__option--focus ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom.dnb-drawer-list__option--focus ~ .dnb-drawer-list__triangle::before { + background-color: var(--color-mint-green-12); +} +.dnb-drawer-list--bottom .dnb-drawer-list__option.first-of-type.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--top .dnb-drawer-list__option.last-of-type.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--bottom .dnb-drawer-list__option.closest-to-top.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before, .dnb-drawer-list--top .dnb-drawer-list__option.closest-to-bottom.dnb-drawer-list__option--selected ~ .dnb-drawer-list__triangle::before { + background-color: var(--color-emerald-green); +} +.dnb-drawer-list > .dnb-form-status { + transform: translateY(-0.4375rem); +}" `; exports[`DrawerList scss have to match snapshot 1`] = ` @@ -990,6 +1022,9 @@ exports[`DrawerList scss have to match snapshot 1`] = ` * DrawerList component * */ +/* + * Utilities + */ :root { --drawer-list-width: 16rem; --drawer-list-height: 2rem; @@ -998,7 +1033,8 @@ exports[`DrawerList scss have to match snapshot 1`] = ` --drawer-list-text-padding: 0.5rem; --drawer-list-height--small: 1.5rem; --drawer-list-height--medium: 2.5rem; - --drawer-list-height--large: 3rem; } + --drawer-list-height--large: 3rem; +} .dnb-drawer-list { display: block; @@ -1006,282 +1042,364 @@ exports[`DrawerList scss have to match snapshot 1`] = ` width: inherit; min-width: inherit; font-size: var(--font-size-small); - /* stylelint-disable-next-line */ } - .dnb-drawer-list__portal__style { - position: absolute; - transition: all 300ms var(--easing-default); - z-index: 3200; } - html[data-visual-test] .dnb-drawer-list__portal__style { - transition: none !important; } - .dnb-drawer-list__portal__style--fixed { - position: fixed; } - .dnb-drawer-list__root { - width: inherit; - min-width: inherit; } - .dnb-drawer-list__root--portal { - position: absolute; - top: 0; - left: 0; } - .dnb-drawer-list__content { - width: 100%; - padding: 0; } - .dnb-drawer-list__list { - position: absolute; - z-index: 3; - top: 0; - bottom: auto; - left: 0; - right: 0; - width: inherit; - min-width: inherit; - margin: 0; - padding: 0; - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - background-color: transparent; - transform: translateY(0); - transition: transform 200ms, opacity 160ms ease-out; } - .dnb-drawer-list__options { - display: flex; - flex-direction: column; - width: 100%; - margin: 0; - max-height: 90vh; - padding: 0; - list-style: none; - background-color: transparent; } - .dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option { - margin: 0; } - .dnb-drawer-list--scroll .dnb-drawer-list__options { - min-height: 2rem; - max-height: 70vh; - transition: max-height 300ms var(--easing-default); - overflow-y: auto; - overscroll-behavior: contain; - scrollbar-width: thin; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: auto; - scrollbar-color: var(--color-sea-green) transparent; } - @supports not (scrollbar-color: auto) { - .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar { - background-color: var(--color-black-8); } - .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical { - width: 0.5rem; } - .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal { - height: 0.5rem; } - .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb { - background-color: var(--color-sea-green); - border-radius: 0.5rem; } - .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover { - background-color: var(--color-emerald-green); } } - html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options { - scroll-behavior: smooth; } - html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options { - scroll-behavior: auto !important; } - html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, - .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options { - transition: none !important; } - .dnb-drawer-list--opened .dnb-drawer-list__options { - scroll-behavior: smooth; } - .dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options { - scroll-behavior: auto; } - .dnb-drawer-list__option { - position: relative; - cursor: pointer; - margin: 0; - padding: 0; - color: inherit; - outline: none; - background-color: var(--color-white); } - .dnb-drawer-list__option__inner { - position: relative; - z-index: 1; - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: repeat(10, min-content); - outline: none; - margin: 0; - padding: 1rem; - color: inherit; - background-color: var(--color-white); } - .dnb-drawer-list__option__inner > * { - align-self: self-start; } - .dnb-drawer-list__option__item { - display: block; - text-overflow: ellipsis; - grid-column: 1; } - .dnb-drawer-list__option__item--horizontal { - display: flex; } - .dnb-drawer-list__option__item > .dnb-icon { - vertical-align: initial; } - .dnb-drawer-list__option__item .dnb-anchor { - display: inline-block; - margin-right: 0.5rem; - word-break: break-word; - white-space: nowrap; - font-size: inherit; } - @media screen and (min-width: 40em) { - .dnb-drawer-list__option__suffix { - grid-column: 2; - grid-row: 1 / -1; - justify-self: end; - align-self: center; } } - .dnb-drawer-list__option--ignore { - cursor: default; - pointer-events: none; } - .dnb-drawer-list__triangle { - position: absolute; - top: calc( var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2); - left: auto; - right: 0; - pointer-events: none; - margin: 0 var(--drawer-list-padding-horizontal); - width: calc(var(--drawer-list-height) / 2); - height: calc(var(--drawer-list-height) / 2); - overflow: hidden; } - .dnb-drawer-list__triangle::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: calc(var(--drawer-list-height) / 2); - height: calc(var(--drawer-list-height) / 2); - transform: translateY(60%) rotate(45deg); - border: 1px solid var(--color-black-border); - background-color: var(--color-white); } - .dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle { + /* stylelint-disable-next-line */ +} +.dnb-drawer-list__portal__style { + position: absolute; + transition: all 300ms var(--easing-default); + z-index: 3200; +} +html[data-visual-test] .dnb-drawer-list__portal__style { + transition: none !important; +} +.dnb-drawer-list__portal__style--fixed { + position: fixed; +} +.dnb-drawer-list__root { + width: inherit; + min-width: inherit; +} +.dnb-drawer-list__root--portal { + position: absolute; + top: 0; + left: 0; +} +.dnb-drawer-list__content { + width: 100%; + padding: 0; +} +.dnb-drawer-list__list { + position: absolute; + z-index: 3; + top: 0; + bottom: auto; + left: 0; + right: 0; + width: inherit; + min-width: inherit; + margin: 0; + padding: 0; + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); + background-color: transparent; + transform: translateY(0); + transition: transform 200ms, opacity 160ms ease-out; +} +.dnb-drawer-list__options { + display: flex; + flex-direction: column; + width: 100%; + margin: 0; + max-height: 90vh; + padding: 0; + list-style: none; + background-color: transparent; +} +.dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option { + margin: 0; +} + +.dnb-drawer-list--scroll .dnb-drawer-list__options { + min-height: 2rem; + max-height: 70vh; + transition: max-height 300ms var(--easing-default); + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: auto; + scrollbar-color: var(--color-sea-green) transparent; +} +@supports not (scrollbar-color: auto) { + .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar { + background-color: var(--color-black-8); + } + .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical { + width: 0.5rem; + } + .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal { + height: 0.5rem; + } + .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb { + background-color: var(--color-sea-green); + border-radius: 0.5rem; + } + .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover { + background-color: var(--color-emerald-green); + } +} +html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options { + scroll-behavior: smooth; +} +html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options { + scroll-behavior: auto !important; +} +html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options { + transition: none !important; +} +.dnb-drawer-list--opened .dnb-drawer-list__options { + scroll-behavior: smooth; +} +.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options { + scroll-behavior: auto; +} +.dnb-drawer-list__option { + position: relative; + cursor: pointer; + margin: 0; + padding: 0; + color: inherit; + outline: none; + background-color: var(--color-white); +} +.dnb-drawer-list__option__inner { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: repeat(10, min-content); + outline: none; + margin: 0; + padding: 1rem; + color: inherit; + background-color: var(--color-white); +} +.dnb-drawer-list__option__inner > * { + align-self: self-start; +} +.dnb-drawer-list__option__item { + display: block; + text-overflow: ellipsis; + grid-column: 1; +} +.dnb-drawer-list__option__item--horizontal { + display: flex; +} +.dnb-drawer-list__option__item > .dnb-icon { + vertical-align: initial; +} +.dnb-drawer-list__option__item .dnb-anchor { + display: inline-block; + margin-right: 0.5rem; + word-break: break-word; + white-space: nowrap; + font-size: inherit; +} +@media screen and (min-width: 40em) { + .dnb-drawer-list__option__suffix { + grid-column: 2; + grid-row: 1/-1; + justify-self: end; + align-self: center; + } +} +.dnb-drawer-list__option--ignore { + cursor: default; + pointer-events: none; +} +.dnb-drawer-list__triangle { + position: absolute; + top: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2); + left: auto; + right: 0; + pointer-events: none; + margin: 0 var(--drawer-list-padding-horizontal); + width: calc(var(--drawer-list-height) / 2); + height: calc(var(--drawer-list-height) / 2); + overflow: hidden; +} +.dnb-drawer-list__triangle::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: calc(var(--drawer-list-height) / 2); + height: calc(var(--drawer-list-height) / 2); + transform: translateY(60%) rotate(45deg); + border: 1px solid var(--color-black-border); + background-color: var(--color-white); +} +.dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle { + left: 0; + right: auto; +} +.dnb-drawer-list--top .dnb-drawer-list__triangle { + top: auto; + bottom: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2 - 2px); + transform: rotate(180deg); +} +.dnb-drawer-list--top .dnb-drawer-list__triangle::before { + transform: translateY(65%) rotate(45deg); +} +.dnb-drawer-list--is-popup.dnb-drawer-list--right { + position: absolute; + left: auto; + right: 0; +} +.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { + left: -0.5rem; +} +.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { + right: -0.5rem; +} +.dnb-drawer-list--opened .dnb-drawer-list__list { + z-index: 100; + display: flex; + flex-direction: column; +} +.dnb-drawer-list--opened .dnb-drawer-list__list:not(.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation) { + animation: drawer-list-slide-top-down 200ms ease-out 1 forwards; +} +html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list, .dnb-drawer-list--opened .dnb-drawer-list__list--no-animation { + animation-duration: 1ms !important; +} +.dnb-drawer-list--hidden .dnb-drawer-list__list { + display: none; +} +.dnb-drawer-list--bottom .dnb-drawer-list__list { + top: 0; + bottom: auto; +} +.dnb-drawer-list--top .dnb-drawer-list__list { + top: auto; + bottom: var(--drawer-list-height); +} +.dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list { + top: var(--drawer-list-height); + bottom: auto; +} +.dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list { + top: var(--drawer-list-height--small); +} +.dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list { + bottom: var(--drawer-list-height--small); +} +.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { + left: -0.75rem; +} +.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { + right: -0.75rem; +} +.dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list { + top: var(--drawer-list-height--medium); +} +.dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list { + bottom: var(--drawer-list-height--medium); +} +.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { + left: -0.25rem; +} +.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { + right: -0.25rem; +} +.dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list { + top: var(--drawer-list-height--large); +} +.dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list { + bottom: var(--drawer-list-height--large); +} +.dnb-drawer-list--large .dnb-drawer-list__triangle { + margin: 0 1.25rem; +} +.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { + left: -0.25rem; +} +.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { + right: -0.25rem; +} +.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { + left: auto; +} +.dnb-drawer-list__root > .dnb-drawer-list--right { + position: absolute; + right: 0; + left: auto; +} +.dnb-drawer-list__portal .dnb-drawer-list--right { + right: 100%; +} +.dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list { + top: auto; + bottom: 0; +} +.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation) { + animation: drawer-list-slide-top-up 150ms ease-out 1 forwards; +} +html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list, .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation { + animation-duration: 1ms !important; +} +.dnb-drawer-list--action-menu .dnb-drawer-list__option__inner { + flex-direction: row; + justify-content: flex-start; + align-items: center; +} +@media screen and (min-width: 40em) { + .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { left: 0; - right: auto; } - .dnb-drawer-list--top .dnb-drawer-list__triangle { - top: auto; - bottom: calc( var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2 - 2px); - transform: rotate(180deg); } - .dnb-drawer-list--top .dnb-drawer-list__triangle::before { - transform: translateY(65%) rotate(45deg); } - .dnb-drawer-list--is-popup.dnb-drawer-list--right { - position: absolute; - left: auto; - right: 0; } - .dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { - left: -0.5rem; } - .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - right: -0.5rem; } - .dnb-drawer-list--opened .dnb-drawer-list__list { - z-index: 100; - display: flex; - flex-direction: column; } - .dnb-drawer-list--opened .dnb-drawer-list__list { - animation: drawer-list-slide-top-down 200ms ease-out 1 forwards; } - html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list, .dnb-drawer-list--opened .dnb-drawer-list__list--no-animation { - animation-duration: 1ms !important; } - .dnb-drawer-list--hidden .dnb-drawer-list__list { - display: none; } - .dnb-drawer-list--bottom .dnb-drawer-list__list { - top: 0; - bottom: auto; } - .dnb-drawer-list--top .dnb-drawer-list__list { - top: auto; - bottom: var(--drawer-list-height); } - .dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list { - top: var(--drawer-list-height); - bottom: auto; } - .dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list { - top: var(--drawer-list-height--small); } - .dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list { - bottom: var(--drawer-list-height--small); } - .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { - left: -0.75rem; } - .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - right: -0.75rem; } - .dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list { - top: var(--drawer-list-height--medium); } - .dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list { - bottom: var(--drawer-list-height--medium); } - .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { - left: -0.25rem; } - .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - right: -0.25rem; } - .dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list { - top: var(--drawer-list-height--large); } - .dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list { - bottom: var(--drawer-list-height--large); } - .dnb-drawer-list--large .dnb-drawer-list__triangle { - margin: 0 1.25rem; } - .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { - left: -0.25rem; } - .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - right: -0.25rem; } - .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - left: auto; } - .dnb-drawer-list__root > .dnb-drawer-list--right { - position: absolute; + } + .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { right: 0; - left: auto; } - .dnb-drawer-list__portal .dnb-drawer-list--right { - right: 100%; } - .dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list { - top: auto; - bottom: 0; } - .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list { - animation: drawer-list-slide-top-up 150ms ease-out 1 forwards; } - html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list, .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation { - animation-duration: 1ms !important; } - .dnb-drawer-list--action-menu .dnb-drawer-list__option__inner { - flex-direction: row; - justify-content: flex-start; - align-items: center; } - @media screen and (min-width: 40em) { - .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list { - left: 0; } - .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list { - right: 0; } } + } +} @keyframes drawer-list-scale-in { from { opacity: 0; - transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); } + transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); + } to { opacity: 1; - transform: scale(1) translateX(0); } } - + transform: scale(1) translateX(0); + } +} @keyframes drawer-list-scale-out { from { opacity: 1; - transform: scale(1) translateX(0); } + transform: scale(1) translateX(0); + } to { opacity: 0; - transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); } } - + transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); + } +} @keyframes drawer-list-slide-top-down { from { opacity: 0; - transform: translateY(calc(1px - var(--drawer-list-height))); } + transform: translateY(calc(1px - var(--drawer-list-height))); + } to { opacity: 1; - transform: translateY(0); } } - + transform: translateY(0); + } +} @keyframes drawer-list-slide-top-up { from { opacity: 1; - transform: translateY(0); } + transform: translateY(0); + } to { opacity: 0; - transform: translateY(calc(1px - var(--drawer-list-height))); } } - + transform: translateY(calc(1px - var(--drawer-list-height))); + } +} @keyframes drawer-list-slide-bottom-down { from { opacity: 1; - transform: translateY(0); } + transform: translateY(0); + } to { opacity: 0; - transform: translateY(calc(1px + var(--drawer-list-height))); } } - + transform: translateY(calc(1px + var(--drawer-list-height))); + } +} @keyframes drawer-list-slide-bottom-up { from { opacity: 0; - transform: translateY(calc(1px + var(--drawer-list-height))); } + transform: translateY(calc(1px + var(--drawer-list-height))); + } to { opacity: 1; - transform: translateY(0); } } -" + transform: translateY(0); + } +}" `; 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 cc015d3408d..7b07c948fb7 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 @@ -29,7 +29,8 @@ button.dnb-anchor { background: none; appearance: none; -moz-appearance: none; - -webkit-appearance: none; } + -webkit-appearance: none; +} .dnb-anchor { display: inline; @@ -41,275 +42,328 @@ button.dnb-anchor { text-underline-offset: 0.25em; border-radius: 0; color: var(--color-sea-green); - transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out; } - sup .dnb-anchor, - sub .dnb-anchor { - padding: 0 0.025em 0; } - .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; } - .dnb-anchor:focus { - outline: none; - border-radius: 0.25em; } - .dnb-anchor:focus:not(:active) { - color: var(--color-sea-green); - background-color: transparent; - transition: none; } - .dnb-anchor:focus:not(:active), - .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor { - text-decoration: none; } - html[data-whatinput='keyboard'] .dnb-anchor:focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-anchor:hover, .dnb-anchor:active { - color: var(--color-sea-green); - background-color: var(--color-mint-green-50); - border-radius: 0.25em; } - .dnb-anchor:hover, - .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, - .dnb-section .dnb-anchor:active.dnb-anchor { - text-decoration: none; } - .dnb-anchor:active { - color: var(--color-mint-green); - background-color: var(--color-emerald-green); - border-radius: 0.25em; } - .dnb-anchor:active, - .dnb-section .dnb-anchor:active.dnb-anchor { - text-decoration: none; } - .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon) { - position: relative; - background-size: 0; - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=); } - .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon)::after { - content: ''; - position: relative; - display: inline-block; - width: 0.889em; - height: 0.889em; - margin-left: 0.3em; - margin-right: 0.125em; - color: inherit; - background-size: cover; - background-image: inherit; - 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):not(.dnb-anchor--no-icon)::after { - top: 0.125em; } - [data-visual-test-wrapper] .dnb-anchor { - transition: none; } - .dnb-anchor .dnb-icon { - display: inline-block; - transform: translateY(-0.0625em); } + transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out; +} +sup .dnb-anchor, sub .dnb-anchor { + padding: 0 0.025em 0; +} +.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; +} +.dnb-anchor:focus { + outline: none; + border-radius: 0.25em; +} +.dnb-anchor:focus:not(:active) { + color: var(--color-sea-green); + background-color: transparent; + transition: none; +} +.dnb-anchor:focus:not(:active), .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor { + text-decoration: none; +} +html[data-whatinput=keyboard] .dnb-anchor:focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-anchor:hover, .dnb-anchor:active { + color: var(--color-sea-green); + background-color: var(--color-mint-green-50); + border-radius: 0.25em; +} +.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { + text-decoration: none; +} +.dnb-anchor:active { + color: var(--color-mint-green); + background-color: var(--color-emerald-green); + border-radius: 0.25em; +} +.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { + text-decoration: none; +} +.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon) { + position: relative; + background-size: 0; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=); +} +.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon)::after { + content: ""; + position: relative; + display: inline-block; + width: 0.889em; + height: 0.889em; + margin-left: 0.3em; + margin-right: 0.125em; + color: inherit; + background-size: cover; + background-image: inherit; + 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):not(.dnb-anchor--no-icon)::after { + top: 0.125em; +} +[data-visual-test-wrapper] .dnb-anchor { + transition: none; +} +.dnb-anchor .dnb-icon { + display: inline-block; + transform: translateY(-0.0625em); +} .dnb-anchor--hover { color: var(--color-sea-green); background-color: var(--color-mint-green-50); - border-radius: 0.25em; } - .dnb-anchor--hover, - .dnb-section .dnb-anchor--hover.dnb-anchor { - text-decoration: none; } + border-radius: 0.25em; +} +.dnb-anchor--hover, .dnb-section .dnb-anchor--hover.dnb-anchor { + text-decoration: none; +} .dnb-anchor--active { color: var(--color-mint-green); background-color: var(--color-emerald-green); - border-radius: 0.25em; } - .dnb-anchor--active, - .dnb-section .dnb-anchor--active.dnb-anchor { - text-decoration: none; } + border-radius: 0.25em; +} +.dnb-anchor--active, .dnb-section .dnb-anchor--active.dnb-anchor { + text-decoration: none; +} .dnb-anchor--focus { outline: none; - border-radius: 0.25em; } - .dnb-anchor--focus:not(:active) { - color: var(--color-sea-green); - background-color: transparent; - transition: none; } - .dnb-anchor--focus:not(:active), - .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor { - text-decoration: none; } - html[data-whatinput='mouse'] .dnb-anchor--focus { - --border-color: var(--color-emerald-green); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } + border-radius: 0.25em; +} +.dnb-anchor--focus:not(:active) { + color: var(--color-sea-green); + background-color: transparent; + transition: none; +} +.dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor { + text-decoration: none; +} +html[data-whatinput=mouse] .dnb-anchor--focus { + --border-color: var(--color-emerald-green); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} .dnb-anchor--no-style { color: inherit; - transition: none; } - .dnb-anchor--no-style, - .dnb-section .dnb-anchor--no-style.dnb-anchor { - text-decoration: none; } - .dnb-anchor--no-style:hover { - color: inherit; - background-color: transparent; } - -.dnb-anchor--no-underline, -.dnb-section .dnb-anchor--no-underline.dnb-anchor { - text-decoration: none; } + transition: none; +} +.dnb-anchor--no-style, .dnb-section .dnb-anchor--no-style.dnb-anchor { + text-decoration: none; +} +.dnb-anchor--no-style:hover { + color: inherit; + background-color: transparent; +} + +.dnb-anchor--no-underline, .dnb-section .dnb-anchor--no-underline.dnb-anchor { + text-decoration: none; +} .dnb-anchor--no-hover:hover { color: inherit; - background-color: transparent; } + background-color: transparent; +} .dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus { - border-radius: 0; } + border-radius: 0; +} .dnb-anchor--no-animation { - transition: none; } + transition: none; +} .dnb-anchor--contrast { - color: var(--color-white); } - .dnb-anchor--contrast:hover, .dnb-anchor--contrast:active { - color: var(--color-emerald-green); - background-color: var(--color-white); - text-decoration: none; } - .dnb-anchor--contrast:active { - color: var(--color-emerald-green); - background-color: var(--color-white); } - .dnb-anchor--contrast:not(:disabled):focus { - color: var(--color-white); - background-color: transparent; - outline: none; } - html[data-whatinput='keyboard'] .dnb-anchor--contrast:not(:disabled):focus { - --border-color: var(--color-white); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } + color: var(--color-white); +} +.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active { + color: var(--color-emerald-green); + background-color: var(--color-white); + text-decoration: none; +} +.dnb-anchor--contrast:active { + color: var(--color-emerald-green); + background-color: var(--color-white); +} +.dnb-anchor--contrast:not(:disabled):focus { + color: var(--color-white); + background-color: transparent; + outline: none; +} +html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus { + --border-color: var(--color-white); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} a.dnb-button { - transition: none; } + transition: none; +} .dnb-skeleton > .dnb-anchor, .dnb-anchor.dnb-skeleton { - text-decoration: none; } - .dnb-skeleton > .dnb-anchor::after, - .dnb-anchor.dnb-skeleton::after { - filter: grayscale(100%) opacity(0.3); } + text-decoration: none; +} +.dnb-skeleton > .dnb-anchor::after, +.dnb-anchor.dnb-skeleton::after { + filter: grayscale(100%) opacity(0.3); +} /* * Typography * */ .dnb-small { - font-size: var(--font-size-small); } + font-size: var(--font-size-small); +} sup, sub { font-size: 0.777777em; - line-height: 0.5em; } + line-height: 0.5em; +} .dnb-p { font-size: var(--font-size-basis); color: var(--theme-color-black-80, currentColor); - padding: 0; } - .dnb-p:not([class*='space__top']) { - margin-top: 0; } - .dnb-p:not([class*='space__bottom']) { - margin-bottom: 0; } - .dnb-p--lead { - font-size: var(--font-size-medium); - line-height: calc(var(--line-height-medium) - 0.25rem); - font-weight: var(--font-weight-medium); } - .dnb-p--lead > small { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-p--medium { - font-weight: var(--font-weight-medium); } - .dnb-p b, - .dnb-p strong { - font-weight: var(--font-weight-medium); } - .dnb-p--bold { - font-weight: var(--font-weight-bold); } - .dnb-p__size--xx-large { - font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); } - .dnb-p__size--x-large { - font-size: var(--font-size-x-large); - line-height: var(--line-height-x-large); } - .dnb-p__size--large { - font-size: var(--font-size-large); - line-height: var(--line-height-large); } - .dnb-p__size--basis { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-p__size--medium { - font-size: var(--font-size-medium); - line-height: var(--line-height-medium); } - .dnb-p--small, .dnb-p__size--small, - .dnb-p > small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-p--x-small, .dnb-p__size--x-small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-x-small); } - .dnb-p > cite { - font-weight: var(--font-weight-medium); - line-height: var(--line-height-basis); - font-style: italic; } + padding: 0; +} +.dnb-p:not([class*=space__top]) { + margin-top: 0; +} +.dnb-p:not([class*=space__bottom]) { + margin-bottom: 0; +} +.dnb-p--lead { + font-size: var(--font-size-medium); + line-height: calc(var(--line-height-medium) - 0.25rem); + font-weight: var(--font-weight-medium); +} +.dnb-p--lead > small { + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-p--medium { + font-weight: var(--font-weight-medium); +} +.dnb-p b, +.dnb-p strong { + font-weight: var(--font-weight-medium); +} +.dnb-p--bold { + font-weight: var(--font-weight-bold); +} +.dnb-p__size--xx-large { + font-size: var(--font-size-xx-large); + line-height: var(--line-height-x-large); +} +.dnb-p__size--x-large { + font-size: var(--font-size-x-large); + line-height: var(--line-height-x-large); +} +.dnb-p__size--large { + font-size: var(--font-size-large); + line-height: var(--line-height-large); +} +.dnb-p__size--basis { + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-p__size--medium { + font-size: var(--font-size-medium); + line-height: var(--line-height-medium); +} +.dnb-p--small, .dnb-p__size--small, .dnb-p > small { + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-p--x-small, .dnb-p__size--x-small { + font-size: var(--font-size-x-small); + line-height: var(--line-height-x-small); +} +.dnb-p > cite { + font-weight: var(--font-weight-medium); + line-height: var(--line-height-basis); + font-style: italic; +} .dnb-table b, .dnb-table strong { - font-weight: var(--font-weight-medium); } + font-weight: var(--font-weight-medium); +} .dnb-h--xx-large { font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); } - .dnb-h--xx-large > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); } + line-height: var(--line-height-x-large); +} +.dnb-h--xx-large > small { + display: block; + font-size: var(--font-size-x-large); + line-height: var(--line-height-large); +} .dnb-h--x-large { font-size: var(--font-size-x-large); - line-height: var(--line-height-large); } - .dnb-h--x-large > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); } + line-height: var(--line-height-large); +} +.dnb-h--x-large > small { + display: block; + font-size: var(--font-size-x-large); + line-height: var(--line-height-large); +} .dnb-h--large { font-size: var(--font-size-large); - line-height: var(--line-height-medium); } - .dnb-h--large > small { - font-size: var(--font-size-medium); - line-height: calc(var(--line-height-medium) - 0.125rem); } + line-height: var(--line-height-medium); +} +.dnb-h--large > small { + font-size: var(--font-size-medium); + line-height: calc(var(--line-height-medium) - 0.125rem); +} /* dnb-h--medium looks the same as .dnb-lead */ .dnb-lead, .dnb-h--medium { font-size: var(--font-size-medium); line-height: calc(var(--line-height-medium) - 0.25rem); - font-weight: var(--font-weight-medium); } - .dnb-lead > small, - .dnb-h--medium > small { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } + font-weight: var(--font-weight-medium); +} +.dnb-lead > small, +.dnb-h--medium > small { + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} .dnb-h--basis { font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } - .dnb-h--basis > small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); } + line-height: var(--line-height-basis); +} +.dnb-h--basis > small { + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} .dnb-h--small { font-size: var(--font-size-small); - line-height: var(--line-height-small); } - .dnb-h--small > small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-small); } + line-height: var(--line-height-small); +} +.dnb-h--small > small { + font-size: var(--font-size-x-small); + line-height: var(--line-height-small); +} .dnb-h--x-small { font-size: var(--font-size-x-small); - line-height: var(--line-height-x-small); } + line-height: var(--line-height-x-small); +} .dnb-lead, .dnb-h--xx-large, @@ -330,148 +384,136 @@ sub { padding: 0; font-family: var(--font-family-default); font-weight: var(--font-weight-medium); - color: var(--theme-color-black-80, currentColor); } - .dnb-lead:not([class*='dnb-space']), - .dnb-h--xx-large:not([class*='dnb-space']), - .dnb-h--x-large:not([class*='dnb-space']), - .dnb-h--large:not([class*='dnb-space']), - .dnb-h--medium:not([class*='dnb-space']), - .dnb-h--basis:not([class*='dnb-space']), - .dnb-h--small:not([class*='dnb-space']), - .dnb-h--x-small:not([class*='dnb-space']), - .dnb-core-style .dnb-lead:not([class*='dnb-space']), - .dnb-core-style .dnb-h--xx-large:not([class*='dnb-space']), - .dnb-core-style .dnb-h--x-large:not([class*='dnb-space']), - .dnb-core-style .dnb-h--large:not([class*='dnb-space']), - .dnb-core-style .dnb-h--medium:not([class*='dnb-space']), - .dnb-core-style .dnb-h--basis:not([class*='dnb-space']), - .dnb-core-style .dnb-h--small:not([class*='dnb-space']), - .dnb-core-style .dnb-h--x-small:not([class*='dnb-space']) { - margin: 0; } - .dnb-lead .dnb-icon--default, - .dnb-h--xx-large .dnb-icon--default, - .dnb-h--x-large .dnb-icon--default, - .dnb-h--large .dnb-icon--default, - .dnb-h--medium .dnb-icon--default, - .dnb-h--basis .dnb-icon--default, - .dnb-h--small .dnb-icon--default, - .dnb-h--x-small .dnb-icon--default, - .dnb-core-style .dnb-lead .dnb-icon--default, - .dnb-core-style .dnb-h--xx-large .dnb-icon--default, - .dnb-core-style .dnb-h--x-large .dnb-icon--default, - .dnb-core-style .dnb-h--large .dnb-icon--default, - .dnb-core-style .dnb-h--medium .dnb-icon--default, - .dnb-core-style .dnb-h--basis .dnb-icon--default, - .dnb-core-style .dnb-h--small .dnb-icon--default, - .dnb-core-style .dnb-h--x-small .dnb-icon--default { - font-size: 1em; } - .dnb-lead .dnb-icon--medium, - .dnb-h--xx-large .dnb-icon--medium, - .dnb-h--x-large .dnb-icon--medium, - .dnb-h--large .dnb-icon--medium, - .dnb-h--medium .dnb-icon--medium, - .dnb-h--basis .dnb-icon--medium, - .dnb-h--small .dnb-icon--medium, - .dnb-h--x-small .dnb-icon--medium, - .dnb-core-style .dnb-lead .dnb-icon--medium, - .dnb-core-style .dnb-h--xx-large .dnb-icon--medium, - .dnb-core-style .dnb-h--x-large .dnb-icon--medium, - .dnb-core-style .dnb-h--large .dnb-icon--medium, - .dnb-core-style .dnb-h--medium .dnb-icon--medium, - .dnb-core-style .dnb-h--basis .dnb-icon--medium, - .dnb-core-style .dnb-h--small .dnb-icon--medium, - .dnb-core-style .dnb-h--x-small .dnb-icon--medium { - font-size: 1.5em; } - .dnb-lead a, - .dnb-lead .dnb-anchor, - .dnb-h--xx-large a, - .dnb-h--xx-large .dnb-anchor, - .dnb-h--x-large a, - .dnb-h--x-large .dnb-anchor, - .dnb-h--large a, - .dnb-h--large .dnb-anchor, - .dnb-h--medium a, - .dnb-h--medium .dnb-anchor, - .dnb-h--basis a, - .dnb-h--basis .dnb-anchor, - .dnb-h--small a, - .dnb-h--small .dnb-anchor, - .dnb-h--x-small a, - .dnb-h--x-small .dnb-anchor, - .dnb-core-style .dnb-lead a, - .dnb-core-style .dnb-lead .dnb-anchor, - .dnb-core-style .dnb-h--xx-large a, - .dnb-core-style .dnb-h--xx-large .dnb-anchor, - .dnb-core-style .dnb-h--x-large a, - .dnb-core-style .dnb-h--x-large .dnb-anchor, - .dnb-core-style .dnb-h--large a, - .dnb-core-style .dnb-h--large .dnb-anchor, - .dnb-core-style .dnb-h--medium a, - .dnb-core-style .dnb-h--medium .dnb-anchor, - .dnb-core-style .dnb-h--basis a, - .dnb-core-style .dnb-h--basis .dnb-anchor, - .dnb-core-style .dnb-h--small a, - .dnb-core-style .dnb-h--small .dnb-anchor, - .dnb-core-style .dnb-h--x-small a, - .dnb-core-style .dnb-h--x-small .dnb-anchor { - padding-top: 0; - padding-bottom: 0.03125rem; } - -.dnb-spacing .dnb-h--xx-large:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*='space__top']) { - margin-top: 3rem; } - -.dnb-spacing .dnb-h--xx-large:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*='space__bottom']) { - margin-bottom: 2.5rem; } - -.dnb-spacing .dnb-h--x-large:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*='space__top']) { - margin-top: 3rem; } - -.dnb-spacing .dnb-h--x-large:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*='space__bottom']) { - margin-bottom: 1rem; } - -.dnb-spacing .dnb-h--large:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--large:not([class*='space__top']) { - margin-top: 3rem; } - -.dnb-spacing .dnb-h--large:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--large:not([class*='space__bottom']) { - margin-bottom: 1rem; } - -.dnb-spacing .dnb-lead:not([class*='space__top']), -.dnb-spacing .dnb-h--medium:not([class*='space__top']), -.dnb-spacing .dnb-h--basis:not([class*='space__top']), -.dnb-spacing .dnb-h--small:not([class*='space__top']), -.dnb-spacing .dnb-h--x-small:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-lead:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--medium:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--basis:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--small:not([class*='space__top']), -.dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*='space__top']) { - margin-top: 2rem; } - -.dnb-spacing .dnb-lead:not([class*='space__bottom']), -.dnb-spacing .dnb-h--medium:not([class*='space__bottom']), -.dnb-spacing .dnb-h--basis:not([class*='space__bottom']), -.dnb-spacing .dnb-h--small:not([class*='space__bottom']), -.dnb-spacing .dnb-h--x-small:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-lead:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--medium:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--basis:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--small:not([class*='space__bottom']), -.dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*='space__bottom']) { - margin-bottom: 1rem; } - -.dnb-spacing .dnb-p:not([class*='dnb-space__top']), -.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-p:not([class*='dnb-space__bottom']), -.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } + color: var(--theme-color-black-80, currentColor); +} +.dnb-lead:not([class*=dnb-space]), +.dnb-h--xx-large:not([class*=dnb-space]), +.dnb-h--x-large:not([class*=dnb-space]), +.dnb-h--large:not([class*=dnb-space]), +.dnb-h--medium:not([class*=dnb-space]), +.dnb-h--basis:not([class*=dnb-space]), +.dnb-h--small:not([class*=dnb-space]), +.dnb-h--x-small:not([class*=dnb-space]), +.dnb-core-style .dnb-lead:not([class*=dnb-space]), +.dnb-core-style .dnb-h--xx-large:not([class*=dnb-space]), +.dnb-core-style .dnb-h--x-large:not([class*=dnb-space]), +.dnb-core-style .dnb-h--large:not([class*=dnb-space]), +.dnb-core-style .dnb-h--medium:not([class*=dnb-space]), +.dnb-core-style .dnb-h--basis:not([class*=dnb-space]), +.dnb-core-style .dnb-h--small:not([class*=dnb-space]), +.dnb-core-style .dnb-h--x-small:not([class*=dnb-space]) { + margin: 0; +} +.dnb-lead .dnb-icon--default, +.dnb-h--xx-large .dnb-icon--default, +.dnb-h--x-large .dnb-icon--default, +.dnb-h--large .dnb-icon--default, +.dnb-h--medium .dnb-icon--default, +.dnb-h--basis .dnb-icon--default, +.dnb-h--small .dnb-icon--default, +.dnb-h--x-small .dnb-icon--default, +.dnb-core-style .dnb-lead .dnb-icon--default, +.dnb-core-style .dnb-h--xx-large .dnb-icon--default, +.dnb-core-style .dnb-h--x-large .dnb-icon--default, +.dnb-core-style .dnb-h--large .dnb-icon--default, +.dnb-core-style .dnb-h--medium .dnb-icon--default, +.dnb-core-style .dnb-h--basis .dnb-icon--default, +.dnb-core-style .dnb-h--small .dnb-icon--default, +.dnb-core-style .dnb-h--x-small .dnb-icon--default { + font-size: 1em; +} +.dnb-lead .dnb-icon--medium, +.dnb-h--xx-large .dnb-icon--medium, +.dnb-h--x-large .dnb-icon--medium, +.dnb-h--large .dnb-icon--medium, +.dnb-h--medium .dnb-icon--medium, +.dnb-h--basis .dnb-icon--medium, +.dnb-h--small .dnb-icon--medium, +.dnb-h--x-small .dnb-icon--medium, +.dnb-core-style .dnb-lead .dnb-icon--medium, +.dnb-core-style .dnb-h--xx-large .dnb-icon--medium, +.dnb-core-style .dnb-h--x-large .dnb-icon--medium, +.dnb-core-style .dnb-h--large .dnb-icon--medium, +.dnb-core-style .dnb-h--medium .dnb-icon--medium, +.dnb-core-style .dnb-h--basis .dnb-icon--medium, +.dnb-core-style .dnb-h--small .dnb-icon--medium, +.dnb-core-style .dnb-h--x-small .dnb-icon--medium { + font-size: 1.5em; +} +.dnb-lead a, +.dnb-lead .dnb-anchor, +.dnb-h--xx-large a, +.dnb-h--xx-large .dnb-anchor, +.dnb-h--x-large a, +.dnb-h--x-large .dnb-anchor, +.dnb-h--large a, +.dnb-h--large .dnb-anchor, +.dnb-h--medium a, +.dnb-h--medium .dnb-anchor, +.dnb-h--basis a, +.dnb-h--basis .dnb-anchor, +.dnb-h--small a, +.dnb-h--small .dnb-anchor, +.dnb-h--x-small a, +.dnb-h--x-small .dnb-anchor, +.dnb-core-style .dnb-lead a, +.dnb-core-style .dnb-lead .dnb-anchor, +.dnb-core-style .dnb-h--xx-large a, +.dnb-core-style .dnb-h--xx-large .dnb-anchor, +.dnb-core-style .dnb-h--x-large a, +.dnb-core-style .dnb-h--x-large .dnb-anchor, +.dnb-core-style .dnb-h--large a, +.dnb-core-style .dnb-h--large .dnb-anchor, +.dnb-core-style .dnb-h--medium a, +.dnb-core-style .dnb-h--medium .dnb-anchor, +.dnb-core-style .dnb-h--basis a, +.dnb-core-style .dnb-h--basis .dnb-anchor, +.dnb-core-style .dnb-h--small a, +.dnb-core-style .dnb-h--small .dnb-anchor, +.dnb-core-style .dnb-h--x-small a, +.dnb-core-style .dnb-h--x-small .dnb-anchor { + padding-top: 0; + padding-bottom: 0.03125rem; +} + +.dnb-spacing .dnb-h--xx-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__top]) { + margin-top: 3rem; +} +.dnb-spacing .dnb-h--xx-large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__bottom]) { + margin-bottom: 2.5rem; +} +.dnb-spacing .dnb-h--x-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*=space__top]) { + margin-top: 3rem; +} +.dnb-spacing .dnb-h--x-large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*=space__bottom]) { + margin-bottom: 1rem; +} +.dnb-spacing .dnb-h--large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--large:not([class*=space__top]) { + margin-top: 3rem; +} +.dnb-spacing .dnb-h--large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--large:not([class*=space__bottom]) { + margin-bottom: 1rem; +} +.dnb-spacing .dnb-lead:not([class*=space__top]), +.dnb-spacing .dnb-h--medium:not([class*=space__top]), +.dnb-spacing .dnb-h--basis:not([class*=space__top]), +.dnb-spacing .dnb-h--small:not([class*=space__top]), +.dnb-spacing .dnb-h--x-small:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-lead:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--medium:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--basis:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--small:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*=space__top]) { + margin-top: 2rem; +} +.dnb-spacing .dnb-lead:not([class*=space__bottom]), +.dnb-spacing .dnb-h--medium:not([class*=space__bottom]), +.dnb-spacing .dnb-h--basis:not([class*=space__bottom]), +.dnb-spacing .dnb-h--small:not([class*=space__bottom]), +.dnb-spacing .dnb-h--x-small:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-lead:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--medium:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--basis:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--small:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*=space__bottom]) { + margin-bottom: 1rem; +} +.dnb-spacing .dnb-p:not([class*=dnb-space__top]), .dnb-core-style .dnb-spacing .dnb-p:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-p:not([class*=dnb-space__bottom]), .dnb-core-style .dnb-spacing .dnb-p:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} /* * Blockquote @@ -486,99 +528,111 @@ sub { color: var(--color-mint-green); background-color: var(--color-ocean-green); border-radius: 1rem; - position: relative; } - .dnb-blockquote:not([class*='dnb-space']) { - margin: 0; } - .dnb-blockquote::before { - content: ''; - position: absolute; - top: 2rem; - left: 1.5rem; - width: 3em; - height: 3em; - background-size: cover; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==); } - .dnb-blockquote, .dnb-blockquote.dnb-blockquote--left { - padding-left: 6rem; - padding-top: 2rem; - padding-bottom: 3rem; } - .dnb-blockquote.dnb-blockquote--top { - padding-left: 1.5rem; - padding-top: 6rem; - padding-bottom: 3rem; } - .dnb-blockquote.dnb-blockquote--no-background { - background-color: transparent; - color: var(--theme-color-black-80, currentColor); } - .dnb-blockquote.dnb-blockquote--no-background::before { - filter: grayscale(1) brightness(24%); } - .dnb-blockquote .dnb-cite, - .dnb-blockquote .dnb-figcaption, - .dnb-blockquote cite, - .dnb-blockquote footer, - .dnb-blockquote figcaption { - display: block; - margin-top: 1rem; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-basis); - font-style: italic; } - .dnb-blockquote .dnb-cite::before, - .dnb-blockquote .dnb-figcaption::before, - .dnb-blockquote cite::before, - .dnb-blockquote footer::before, - .dnb-blockquote figcaption::before { - content: '—'; - display: inline-block; - padding-right: 0.5rem; } - .dnb-spacing .dnb-blockquote h1, - .dnb-spacing .dnb-blockquote h2, - .dnb-spacing .dnb-blockquote h3, - .dnb-spacing .dnb-blockquote .dnb-h--xx-large, - .dnb-spacing .dnb-blockquote .dnb-h--large, - .dnb-spacing .dnb-blockquote .dnb-h--medium, - .dnb-spacing .dnb-blockquote .dnb-lead { - margin: 0; } - .dnb-blockquote .dnb-anchor { - font-size: inherit; } - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor, - .dnb-blockquote:not(.dnb-blockquote--no-background) a { - color: var(--color-white); } - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover, .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active, - .dnb-blockquote:not(.dnb-blockquote--no-background) a:hover, - .dnb-blockquote:not(.dnb-blockquote--no-background) a:active { - color: var(--color-emerald-green); - background-color: var(--color-white); - text-decoration: none; } - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active, - .dnb-blockquote:not(.dnb-blockquote--no-background) a:active { - color: var(--color-emerald-green); - background-color: var(--color-white); } - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, - .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus { - color: var(--color-white); - background-color: transparent; - outline: none; } - html[data-whatinput='keyboard'] .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus { - --border-color: var(--color-white); - box-shadow: 0 0 0 0.125rem var(--border-color); - border-color: transparent; } - .dnb-blockquote:not(.dnb-blockquote--no-background) h1, - .dnb-blockquote:not(.dnb-blockquote--no-background) h2, - .dnb-blockquote:not(.dnb-blockquote--no-background) h3, - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--xx-large, - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--large, - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--medium, - .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-lead { - color: var(--color-mint-green); } - -.dnb-spacing .dnb-blockquote:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-blockquote:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } + position: relative; +} +.dnb-blockquote:not([class*=dnb-space]) { + margin: 0; +} +.dnb-blockquote::before { + content: ""; + position: absolute; + top: 2rem; + left: 1.5rem; + width: 3em; + height: 3em; + background-size: cover; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==); +} +.dnb-blockquote, .dnb-blockquote.dnb-blockquote--left { + padding-left: 6rem; + padding-top: 2rem; + padding-bottom: 3rem; +} +.dnb-blockquote.dnb-blockquote--top { + padding-left: 1.5rem; + padding-top: 6rem; + padding-bottom: 3rem; +} +.dnb-blockquote.dnb-blockquote--no-background { + background-color: transparent; + color: var(--theme-color-black-80, currentColor); +} +.dnb-blockquote.dnb-blockquote--no-background::before { + filter: grayscale(1) brightness(24%); +} +.dnb-blockquote .dnb-cite, +.dnb-blockquote .dnb-figcaption, +.dnb-blockquote cite, +.dnb-blockquote footer, +.dnb-blockquote figcaption { + display: block; + margin-top: 1rem; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-basis); + font-style: italic; +} +.dnb-blockquote .dnb-cite::before, +.dnb-blockquote .dnb-figcaption::before, +.dnb-blockquote cite::before, +.dnb-blockquote footer::before, +.dnb-blockquote figcaption::before { + content: "—"; + display: inline-block; + padding-right: 0.5rem; +} +.dnb-spacing .dnb-blockquote h1, .dnb-spacing .dnb-blockquote h2, .dnb-spacing .dnb-blockquote h3, .dnb-spacing .dnb-blockquote .dnb-h--xx-large, .dnb-spacing .dnb-blockquote .dnb-h--large, .dnb-spacing .dnb-blockquote .dnb-h--medium, .dnb-spacing .dnb-blockquote .dnb-lead { + margin: 0; +} +.dnb-blockquote .dnb-anchor { + font-size: inherit; +} +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor, +.dnb-blockquote:not(.dnb-blockquote--no-background) a { + color: var(--color-white); +} +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover, .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active, +.dnb-blockquote:not(.dnb-blockquote--no-background) a:hover, +.dnb-blockquote:not(.dnb-blockquote--no-background) a:active { + color: var(--color-emerald-green); + background-color: var(--color-white); + text-decoration: none; +} +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active, +.dnb-blockquote:not(.dnb-blockquote--no-background) a:active { + color: var(--color-emerald-green); + background-color: var(--color-white); +} +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, +.dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus { + color: var(--color-white); + background-color: transparent; + outline: none; +} +html[data-whatinput=keyboard] .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, +html[data-whatinput=keyboard] .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus { + --border-color: var(--color-white); + box-shadow: 0 0 0 0.125rem var(--border-color); + border-color: transparent; +} +.dnb-blockquote:not(.dnb-blockquote--no-background) h1, +.dnb-blockquote:not(.dnb-blockquote--no-background) h2, +.dnb-blockquote:not(.dnb-blockquote--no-background) h3, +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--xx-large, +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--large, +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--medium, +.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-lead { + color: var(--color-mint-green); +} +.dnb-spacing .dnb-blockquote:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-blockquote:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} .dnb-spacing .dnb-blockquote p:last-child { - margin-bottom: 0; } + margin-bottom: 0; +} /* * Lists @@ -588,210 +642,243 @@ sub { padding: 0; font-size: var(--font-size-basis); line-height: var(--line-height-basis); - color: var(--theme-color-black-80, currentColor); } - .dnb-ul:not([class*='dnb-space']) { - margin: 0; } - .dnb-ul:not([class*='dnb-space__left']) { - padding-left: 2rem; } - .dnb-ul ul, - .dnb-ul ol { - margin-top: 0; - margin-bottom: 1.5rem; - padding-left: 2rem; } - .dnb-ul li, - .dnb-ul--outside li { - position: relative; } - .dnb-ul li::before, - .dnb-ul--outside li::before { - position: absolute; - left: -10rem; - width: 10rem; - padding-right: 0.25rem; - text-align: right; } - .dnb-ul--inside li::before { - position: relative; - left: 0; - width: auto; - padding-right: 0; - text-align: initial; } - .dnb-ul .dnb-anchor { - font-size: inherit; } - .dnb-ul li { - display: list-item; - margin-top: 0.5rem; - margin-bottom: 0.5rem; } + color: var(--theme-color-black-80, currentColor); +} +.dnb-ul:not([class*=dnb-space]) { + margin: 0; +} +.dnb-ul:not([class*=dnb-space__left]) { + padding-left: 2rem; +} +.dnb-ul ul, .dnb-ul ol { + margin-top: 0; + margin-bottom: 1.5rem; + padding-left: 2rem; +} +.dnb-ul li, .dnb-ul--outside li { + position: relative; +} +.dnb-ul li::before, .dnb-ul--outside li::before { + position: absolute; + left: -10rem; + width: 10rem; + padding-right: 0.25rem; + text-align: right; +} +.dnb-ul--inside li::before { + position: relative; + left: 0; + width: auto; + padding-right: 0; + text-align: initial; +} +.dnb-ul .dnb-anchor { + font-size: inherit; +} +.dnb-ul li { + display: list-item; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} .dnb-ol { padding: 0; font-size: var(--font-size-basis); line-height: var(--line-height-basis); color: var(--theme-color-black-80, currentColor); - color: var(--theme-color-black-80, currentColor); } - .dnb-ol:not([class*='dnb-space']) { - margin: 0; } - .dnb-ol:not([class*='dnb-space__left']) { - padding-left: 2rem; } - .dnb-ol ul, - .dnb-ol ol { - margin-top: 0; - margin-bottom: 1.5rem; - padding-left: 2rem; } - .dnb-ol li, - .dnb-ol--outside li { - position: relative; } - .dnb-ol li::before, - .dnb-ol--outside li::before { - position: absolute; - left: -10rem; - width: 10rem; - padding-right: 0.25rem; - text-align: right; } - .dnb-ol--inside li::before { - position: relative; - left: 0; - width: auto; - padding-right: 0; - text-align: initial; } - .dnb-ol .dnb-anchor { - font-size: inherit; } - .dnb-ol li { - display: list-item; - margin-top: 0.5rem; - margin-bottom: 0.5rem; } - .dnb-ol ul, - .dnb-ol ol { - margin-top: 0; - margin-bottom: 1.5rem; - padding-left: 2rem; } - .dnb-ol li, - .dnb-ol--outside li { - position: relative; } - .dnb-ol li::before, - .dnb-ol--outside li::before { - position: absolute; - left: -10rem; - width: 10rem; - padding-right: 0.25rem; - text-align: right; } - .dnb-ol--inside li::before { - position: relative; - left: 0; - width: auto; - padding-right: 0; - text-align: initial; } - .dnb-ol .dnb-anchor { - font-size: inherit; } - .dnb-ol li { - list-style-type: decimal; } - .dnb-ol--nested, - .dnb-ol--nested ol { - counter-reset: item; } - .dnb-ol--nested li { - display: block; } - .dnb-ol--nested li::before { - content: counters(item, ".") ". "; - counter-increment: item; } - .dnb-ol--nested li li::before { - content: counters(item, ".") " "; - counter-increment: item; } - .dnb-ol[type] li { - display: list-item; - list-style-type: inherit; } - .dnb-ol[type] li::before, - .dnb-ol[type] li li::before { - content: none; } + color: var(--theme-color-black-80, currentColor); +} +.dnb-ol:not([class*=dnb-space]) { + margin: 0; +} +.dnb-ol:not([class*=dnb-space__left]) { + padding-left: 2rem; +} +.dnb-ol ul, .dnb-ol ol { + margin-top: 0; + margin-bottom: 1.5rem; + padding-left: 2rem; +} +.dnb-ol li, .dnb-ol--outside li { + position: relative; +} +.dnb-ol li::before, .dnb-ol--outside li::before { + position: absolute; + left: -10rem; + width: 10rem; + padding-right: 0.25rem; + text-align: right; +} +.dnb-ol--inside li::before { + position: relative; + left: 0; + width: auto; + padding-right: 0; + text-align: initial; +} +.dnb-ol .dnb-anchor { + font-size: inherit; +} +.dnb-ol li { + display: list-item; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.dnb-ol ul, .dnb-ol ol { + margin-top: 0; + margin-bottom: 1.5rem; + padding-left: 2rem; +} +.dnb-ol li, .dnb-ol--outside li { + position: relative; +} +.dnb-ol li::before, .dnb-ol--outside li::before { + position: absolute; + left: -10rem; + width: 10rem; + padding-right: 0.25rem; + text-align: right; +} +.dnb-ol--inside li::before { + position: relative; + left: 0; + width: auto; + padding-right: 0; + text-align: initial; +} +.dnb-ol .dnb-anchor { + font-size: inherit; +} +.dnb-ol li { + list-style-type: decimal; +} +.dnb-ol--nested, .dnb-ol--nested ol { + counter-reset: item; +} +.dnb-ol--nested li { + display: block; +} +.dnb-ol--nested li::before { + content: counters(item, ".") ". "; + counter-increment: item; +} +.dnb-ol--nested li li::before { + content: counters(item, ".") " "; + counter-increment: item; +} +.dnb-ol[type] li { + display: list-item; + list-style-type: inherit; +} +.dnb-ol[type] li::before, .dnb-ol[type] li li::before { + content: none; +} .dnb-dl { padding: 0; font-size: var(--font-size-basis); line-height: var(--line-height-basis); - color: var(--theme-color-black-80, currentColor); } - .dnb-dl:not([class*='dnb-space__top']) { - margin-top: 0; } - .dnb-dl:not([class*='dnb-space__bottom']) { - margin-bottom: 0; } - .dnb-dl dt { - margin-top: 1rem; - padding: 0; - font-weight: var(--font-weight-medium); } - .dnb-dl dd ~ dt { - margin-top: 1.5rem; } - .dnb-dl dd { - padding: 0; - margin: 0.5rem 0 1rem; } - .dnb-dl > dd > dl, - .dnb-dl:not([class*='dnb-space']) > dd > dl { - margin-top: 1.5rem; - margin-left: 2rem; } - @media screen and (min-width: 40em) { - .dnb-dl__direction--horizontal { - display: flex; - flex-wrap: wrap; } - .dnb-dl__direction--horizontal dt { - margin-right: 1rem; - max-width: 40%; } - .dnb-dl__direction--horizontal dd { - width: calc(60% - 1rem); } - .dnb-dl__direction--horizontal dt, - .dnb-dl__direction--horizontal dd, - .dnb-dl__direction--horizontal dd ~ dt { - margin-top: 0.5rem; - margin-bottom: 0; } - .dnb-dl__direction--horizontal dt:first-of-type, - .dnb-dl__direction--horizontal dd:first-of-type, - .dnb-dl__direction--horizontal dd ~ dt:first-of-type { - margin-top: 0; } - .dnb-dl dd.dnb-dl__item { - width: 100%; - height: 0; - margin: 0; } } - -.dnb-spacing .dnb-ul:not([class*='dnb-space__top']), -.dnb-spacing .dnb-ol:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-ul:not([class*='dnb-space__bottom']), -.dnb-spacing .dnb-ol:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } + color: var(--theme-color-black-80, currentColor); +} +.dnb-dl:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-dl:not([class*=dnb-space__bottom]) { + margin-bottom: 0; +} +.dnb-dl dt { + margin-top: 1rem; + padding: 0; + font-weight: var(--font-weight-medium); +} +.dnb-dl dd ~ dt { + margin-top: 1.5rem; +} +.dnb-dl dd { + padding: 0; + margin: 0.5rem 0 1rem; +} +.dnb-dl > dd > dl, .dnb-dl:not([class*=dnb-space]) > dd > dl { + margin-top: 1.5rem; + margin-left: 2rem; +} +@media screen and (min-width: 40em) { + .dnb-dl__direction--horizontal { + display: flex; + flex-wrap: wrap; + } + .dnb-dl__direction--horizontal dt { + margin-right: 1rem; + max-width: 40%; + } + .dnb-dl__direction--horizontal dd { + width: calc(60% - 1rem); + } + .dnb-dl__direction--horizontal dt, .dnb-dl__direction--horizontal dd, .dnb-dl__direction--horizontal dd ~ dt { + margin-top: 0.5rem; + margin-bottom: 0; + } + .dnb-dl__direction--horizontal dt:first-of-type, .dnb-dl__direction--horizontal dd:first-of-type, .dnb-dl__direction--horizontal dd ~ dt:first-of-type { + margin-top: 0; + } + .dnb-dl dd.dnb-dl__item { + width: 100%; + height: 0; + margin: 0; + } +} +.dnb-spacing .dnb-ul:not([class*=dnb-space__top]), +.dnb-spacing .dnb-ol:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-ul:not([class*=dnb-space__bottom]), +.dnb-spacing .dnb-ol:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} .dnb-spacing .dnb-ul > li, .dnb-spacing .dnb-ol > li { margin-top: 1rem; margin-bottom: 1rem; - /* stylelint-disable-next-line */ } - .dnb-spacing .dnb-ul > li > p, - .dnb-spacing .dnb-ol > li > p { - margin-top: 1rem; } - -.dnb-spacing .dnb-ul li > ul, -.dnb-spacing .dnb-ul:not([class*='dnb-space']) li > ul, -.dnb-spacing .dnb-ul li > ol, -.dnb-spacing .dnb-ul:not([class*='dnb-space']) li > ol, + /* stylelint-disable-next-line */ +} +.dnb-spacing .dnb-ul > li > p, +.dnb-spacing .dnb-ol > li > p { + margin-top: 1rem; +} +.dnb-spacing .dnb-ul li > ul, .dnb-spacing .dnb-ul:not([class*=dnb-space]) li > ul, .dnb-spacing .dnb-ul li > ol, .dnb-spacing .dnb-ul:not([class*=dnb-space]) li > ol, .dnb-spacing .dnb-ol li > ul, -.dnb-spacing .dnb-ol:not([class*='dnb-space']) li > ul, +.dnb-spacing .dnb-ol:not([class*=dnb-space]) li > ul, .dnb-spacing .dnb-ol li > ol, -.dnb-spacing .dnb-ol:not([class*='dnb-space']) li > ol { - margin-top: -0.5rem; } - -.dnb-spacing .dnb-dl:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-dl:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } +.dnb-spacing .dnb-ol:not([class*=dnb-space]) li > ol { + margin-top: -0.5rem; +} +.dnb-spacing .dnb-dl:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-dl:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} .dnb-unstyled-list { - list-style-type: none; } - .dnb-unstyled-list:not([class*='dnb-space']) { - margin: 0; } - .dnb-unstyled-list:not([class*='dnb-space__left']) { - padding-left: 0; } - .dnb-unstyled-list > li { - list-style-type: none; } - .dnb-unstyled-list > li::before { - content: none; } - .dnb-unstyled-list > dl, - .dnb-unstyled-list > dd { - margin-left: 0; } + list-style-type: none; +} +.dnb-unstyled-list:not([class*=dnb-space]) { + margin: 0; +} +.dnb-unstyled-list:not([class*=dnb-space__left]) { + padding-left: 0; +} +.dnb-unstyled-list > li { + list-style-type: none; +} +.dnb-unstyled-list > li::before { + content: none; +} +.dnb-unstyled-list > dl, +.dnb-unstyled-list > dd { + margin-left: 0; +} /* * Label @@ -800,9 +887,11 @@ sub { .dnb-label { cursor: pointer; color: var(--color-black-80); - overflow-wrap: break-word; } - .dnb-label[disabled] { - cursor: not-allowed; } + overflow-wrap: break-word; +} +.dnb-label[disabled] { + cursor: not-allowed; +} /* * Forms @@ -810,7 +899,8 @@ sub { */ .dnb-form { font-size: var(--font-size-basis); - line-height: var(--line-height-basis); } + line-height: var(--line-height-basis); +} /* * Code / Pre @@ -818,18 +908,20 @@ sub { */ .dnb-code { display: inline-block; - padding: 0.25em 0.25em; - /* 2px 4px */ + padding: 0.25em 0.25em; /* 2px 4px */ font-size: inherit; text-decoration: inherit; line-height: var(--line-height-xx-small--em); color: inherit; background-color: var(--color-mint-green-25); - border-radius: 0.1875em; } - del .dnb-code { - text-decoration: line-through; } - .dnb-code:not([class*='dnb-space']) { - margin: -0.25em 0; } + border-radius: 0.1875em; +} +del .dnb-code { + text-decoration: line-through; +} +.dnb-code:not([class*=dnb-space]) { + margin: -0.25em 0; +} .dnb-pre { display: block; @@ -849,28 +941,36 @@ sub { word-spacing: normal; tab-size: 2; font-size: inherit; - font-family: var(--font-family-monospace); } - .dnb-pre:not([class*='dnb-space']) { - margin: 0; } - .dnb-pre pre { - padding: 1rem; } - .dnb-pre .dnb-spacing pre:not([class*='dnb-space__top']) { - margin-top: 0; } - .dnb-pre .dnb-spacing pre:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } - .dnb-pre.dnb-pre--focus { - --border-color: var(--color-sea-green); - box-shadow: 0 0 0 0.25rem var(--border-color); - border-color: transparent; } - -.dnb-spacing .dnb-pre:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-pre:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } + font-family: var(--font-family-monospace); +} +.dnb-pre:not([class*=dnb-space]) { + margin: 0; +} +.dnb-pre pre { + padding: 1rem; +} +.dnb-pre .dnb-spacing pre:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-pre .dnb-spacing pre:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} +.dnb-pre.dnb-pre--focus { + --border-color: var(--color-sea-green); + box-shadow: 0 0 0 0.25rem var(--border-color); + border-color: transparent; +} + +.dnb-spacing .dnb-pre:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-pre:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +} .dnb-skeleton > .dnb-code { - background-color: transparent; } + background-color: transparent; +} /* * Image @@ -881,38 +981,45 @@ sub { flex-direction: column; padding: 0; text-align: center; - align-items: center; } - .dnb-img:not([class*='dnb-space']) { - margin: 0; } - .dnb-img img, - .dnb-img figcaption { - font-size: var(--font-size-basis); } - .dnb-img img { - position: relative; - z-index: 2; - box-sizing: content-box; - max-width: 100%; - border-style: none; - border-radius: inherit; } - .dnb-img img[alt]::after { - content: attr(alt); - position: absolute; - z-index: 3; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - border-radius: inherit; - color: var(--color-black-80); - background-color: var(--color-black-8); } - .dnb-img figcaption { - margin-top: 0.5rem; } - .dnb-img__img--error { - color: var(--color-black-80); - background-color: var(--color-black-8); } + align-items: center; +} +.dnb-img:not([class*=dnb-space]) { + margin: 0; +} +.dnb-img img, +.dnb-img figcaption { + font-size: var(--font-size-basis); +} +.dnb-img img { + position: relative; + z-index: 2; + box-sizing: content-box; + max-width: 100%; + border-style: none; + border-radius: inherit; +} +.dnb-img img[alt]::after { + content: attr(alt); + position: absolute; + z-index: 3; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: inherit; + color: var(--color-black-80); + background-color: var(--color-black-8); +} +.dnb-img figcaption { + margin-top: 0.5rem; +} +.dnb-img__img--error { + color: var(--color-black-80); + background-color: var(--color-black-8); +} /* * Hr tag / line @@ -924,45 +1031,51 @@ sub { height: 0; display: flex; border: 0; - color: var(--color-black-80); } - .dnb-hr:not([class*='dnb-space']) { - margin: 0; } - .dnb-hr::after { - content: ''; - position: absolute; - z-index: 1; - left: 0; - right: 0; - top: 0; - width: 100%; - height: 1px; - color: inherit; - background-color: currentColor; - border-radius: 0.5px; } - .dnb-hr--fullscreen::after { - left: -100vw; - width: 200vw; } - .dnb-hr--light::after { - border-radius: 0.25px; - /* - * 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-size: 100% 1px; - background-color: transparent; } - .dnb-hr--medium::after { - height: 2px; - border-radius: 0.75px; - /* Revert the hairline halv */ - background-image: linear-gradient(to bottom, currentColor 51%, transparent 51%); - background-size: 100% 3px; - background-color: transparent; } - -.dnb-spacing .dnb-hr:not([class*='dnb-space__top']) { - margin-top: 0; } - -.dnb-spacing .dnb-hr:not([class*='dnb-space__bottom']) { - margin-bottom: 1.5rem; } -" + color: var(--color-black-80); +} +.dnb-hr:not([class*=dnb-space]) { + margin: 0; +} +.dnb-hr::after { + content: ""; + position: absolute; + z-index: 1; + left: 0; + right: 0; + top: 0; + width: 100%; + height: 1px; + color: inherit; + background-color: currentColor; + border-radius: 0.5px; +} +.dnb-hr--fullscreen::after { + left: -100vw; + width: 200vw; +} +.dnb-hr--light::after { + border-radius: 0.25px; + /* + * 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-size: 100% 1px; + background-color: transparent; +} +.dnb-hr--medium::after { + height: 2px; + border-radius: 0.75px; + /* Revert the hairline halv */ + background-image: linear-gradient(to bottom, currentColor 51%, transparent 51%); + background-size: 100% 3px; + background-color: transparent; +} + +.dnb-spacing .dnb-hr:not([class*=dnb-space__top]) { + margin-top: 0; +} +.dnb-spacing .dnb-hr:not([class*=dnb-space__bottom]) { + margin-bottom: 1.5rem; +}" `; diff --git a/yarn.lock b/yarn.lock index 9fedf42c96b..fe00b2a80ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3306,8 +3306,6 @@ __metadata: markdown-tables-to-json: 0.1.7 mkdirp: 1.0.4 mock-match-media: 0.3.0 - node-sass: 5.0.0 - node-sass-once-importer: 5.3.2 nodemon: 2.0.15 opentype.js: 1.3.4 ora: 5.4.1 @@ -3330,7 +3328,7 @@ __metadata: rollup-plugin-node-globals: 1.4.0 rollup-plugin-size-snapshot: 0.12.0 rollup-plugin-terser: 7.0.2 - sass: 1.43.4 + sass: 1.57.1 sass-loader: 10.2.0 semantic-release: 19.0.3 simple-commit-message: 4.1.3 @@ -8893,13 +8891,6 @@ __metadata: languageName: node linkType: hard -"amdefine@npm:>=0.0.4": - version: 1.0.1 - resolution: "amdefine@npm:1.0.1" - checksum: 9d4e15b94641643a9385b2841b4cb2bcf4e8e2f741ea4bd475c93ad7bab261ad4ed827a32e9c549b38b98759c4526c173ae4e6dde8caeb75ee5cebedc9863762 - languageName: node - linkType: hard - "anser@npm:^2.1.0": version: 2.1.1 resolution: "anser@npm:2.1.1" @@ -9667,13 +9658,6 @@ __metadata: languageName: node linkType: hard -"async-foreach@npm:^0.1.3": - version: 0.1.3 - resolution: "async-foreach@npm:0.1.3" - checksum: cc43dee65de4decfa521d9444fb87edb2d475e7125d7f63d0d12004d12953e382135a2ea89a83b145ee1b9ec140550c804e1bfca24085d6faeb52c2902acd1f1 - languageName: node - linkType: hard - "async-settle@npm:^1.0.0": version: 1.0.0 resolution: "async-settle@npm:1.0.0" @@ -11319,7 +11303,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^1.0.0, chalk@npm:^1.1.1": +"chalk@npm:^1.0.0": version: 1.1.3 resolution: "chalk@npm:1.1.3" dependencies: @@ -11378,7 +11362,7 @@ __metadata: languageName: node linkType: hard -"change-case@npm:^3.0.1, change-case@npm:^3.1.0": +"change-case@npm:^3.1.0": version: 3.1.0 resolution: "change-case@npm:3.1.0" dependencies: @@ -11854,17 +11838,6 @@ __metadata: languageName: node linkType: hard -"cliui@npm:^5.0.0": - version: 5.0.0 - resolution: "cliui@npm:5.0.0" - dependencies: - string-width: ^3.1.0 - strip-ansi: ^5.2.0 - wrap-ansi: ^5.1.0 - checksum: 0bb8779efe299b8f3002a73619eaa8add4081eb8d1c17bc4fedc6240557fb4eacdc08fe87c39b002eacb6cfc117ce736b362dbfd8bf28d90da800e010ee97df4 - languageName: node - linkType: hard - "cliui@npm:^6.0.0": version: 6.0.0 resolution: "cliui@npm:6.0.0" @@ -13020,16 +12993,6 @@ __metadata: languageName: node linkType: hard -"css-node-extract@npm:^2.1.3": - version: 2.1.3 - resolution: "css-node-extract@npm:2.1.3" - dependencies: - change-case: ^3.0.1 - postcss: ^6.0.14 - checksum: b7b73fc6ac2f61be707a2b7919dd38d261e3f168a77428c2048d080284c7e623a60e85da09f34a5a45c3901472f155c3fbf7095909046f784bc9ebd585156d7b - languageName: node - linkType: hard - "css-prefers-color-scheme@npm:^3.1.1": version: 3.1.1 resolution: "css-prefers-color-scheme@npm:3.1.1" @@ -13105,15 +13068,6 @@ __metadata: languageName: node linkType: hard -"css-selector-extract@npm:^3.3.6": - version: 3.3.6 - resolution: "css-selector-extract@npm:3.3.6" - dependencies: - postcss: ^6.0.14 - checksum: 8b717658ca021f64ace1a90cd6711474f794154ededdcabfcc2b2f310242624c52051799b9196bcbf926a3b555691bd9e9f813052b8d96b56cf01b8b92dd7077 - languageName: node - linkType: hard - "css-selector-parser@npm:^1.0.0": version: 1.4.1 resolution: "css-selector-parser@npm:1.4.1" @@ -14577,13 +14531,6 @@ __metadata: languageName: node linkType: hard -"emoji-regex@npm:^7.0.1": - version: 7.0.3 - resolution: "emoji-regex@npm:7.0.3" - checksum: 9159b2228b1511f2870ac5920f394c7e041715429a68459ebe531601555f11ea782a8e1718f969df2711d38c66268174407cbca57ce36485544f695c2dfdc96e - languageName: node - linkType: hard - "emoji-regex@npm:^8.0.0": version: 8.0.0 resolution: "emoji-regex@npm:8.0.0" @@ -17993,15 +17940,6 @@ __metadata: languageName: node linkType: hard -"gaze@npm:^1.0.0": - version: 1.1.3 - resolution: "gaze@npm:1.1.3" - dependencies: - globule: ^1.0.0 - checksum: d5fd375a029c07346154806a076bde21290598179d01ffbe7bc3e54092fa65814180bd27fc2b577582737733eec77cdbb7a572a4e73dff934dde60317223cde6 - languageName: node - linkType: hard - "gensync@npm:^1.0.0-beta.1, gensync@npm:^1.0.0-beta.2": version: 1.0.0-beta.2 resolution: "gensync@npm:1.0.0-beta.2" @@ -18331,7 +18269,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": +"glob@npm:^7.0.0, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": version: 7.2.0 resolution: "glob@npm:7.2.0" dependencies: @@ -18372,20 +18310,6 @@ __metadata: languageName: node linkType: hard -"glob@npm:~7.1.1": - version: 7.1.7 - resolution: "glob@npm:7.1.7" - dependencies: - fs.realpath: ^1.0.0 - inflight: ^1.0.4 - inherits: 2 - minimatch: ^3.0.4 - once: ^1.3.0 - path-is-absolute: ^1.0.0 - checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8 - languageName: node - linkType: hard - "global-dirs@npm:^3.0.0": version: 3.0.0 resolution: "global-dirs@npm:3.0.0" @@ -18534,17 +18458,6 @@ __metadata: languageName: node linkType: hard -"globule@npm:^1.0.0": - version: 1.3.3 - resolution: "globule@npm:1.3.3" - dependencies: - glob: ~7.1.1 - lodash: ~4.17.10 - minimatch: ~3.0.2 - checksum: 424b0503791fcaec526aff9a68fd08b6360fd4ec6a406a624ba385d410f3f363e8a1ee7d7fb2ef6448b7f5cd6458256ea08f4b9ef32dbd222977956a6171fc6b - languageName: node - linkType: hard - "glogg@npm:^1.0.0": version: 1.0.2 resolution: "glogg@npm:1.0.2" @@ -19655,6 +19568,13 @@ __metadata: languageName: node linkType: hard +"immutable@npm:^4.0.0": + version: 4.2.2 + resolution: "immutable@npm:4.2.2" + checksum: 4d6437ea9388fe8ceca7eed5c768cf438cda7fa14d2831b87b90aa00cc60d536964d107c255b8a2e5dbf4f44a0e1295afbb9d1f0a65fb4f57b936e71df601862 + languageName: node + linkType: hard + "immutable@npm:~3.7.6": version: 3.7.6 resolution: "immutable@npm:3.7.6" @@ -21802,13 +21722,6 @@ __metadata: languageName: node linkType: hard -"js-base64@npm:^2.1.8": - version: 2.6.4 - resolution: "js-base64@npm:2.6.4" - checksum: 5f4084078d6c46f8529741d110df84b14fac3276b903760c21fa8cc8521370d607325dfe1c1a9fbbeaae1ff8e602665aaeef1362427d8fef704f9e3659472ce8 - languageName: node - linkType: hard - "js-string-escape@npm:^1.0.1": version: 1.0.1 resolution: "js-string-escape@npm:1.0.1" @@ -23239,7 +23152,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.0.0, lodash@npm:^4.17.10, lodash@npm:^4.17.12, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:~4.17.0, lodash@npm:~4.17.10": +"lodash@npm:^4.0.0, lodash@npm:^4.17.10, lodash@npm:^4.17.12, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:~4.17.0": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -23959,7 +23872,7 @@ __metadata: languageName: node linkType: hard -"meow@npm:^3.1.0, meow@npm:^3.7.0": +"meow@npm:^3.1.0": version: 3.7.0 resolution: "meow@npm:3.7.0" dependencies: @@ -24471,7 +24384,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:3.0.4, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:~3.0.2": +"minimatch@npm:3.0.4, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4": version: 3.0.4 resolution: "minimatch@npm:3.0.4" dependencies: @@ -24892,7 +24805,7 @@ __metadata: languageName: node linkType: hard -"nan@npm:^2.12.1, nan@npm:^2.13.2, nan@npm:^2.14.2": +"nan@npm:^2.12.1, nan@npm:^2.14.2": version: 2.15.0 resolution: "nan@npm:2.15.0" dependencies: @@ -25230,26 +25143,6 @@ __metadata: languageName: node linkType: hard -"node-gyp@npm:^7.1.0": - version: 7.1.2 - resolution: "node-gyp@npm:7.1.2" - dependencies: - env-paths: ^2.2.0 - glob: ^7.1.4 - graceful-fs: ^4.2.3 - nopt: ^5.0.0 - npmlog: ^4.1.2 - request: ^2.88.2 - rimraf: ^3.0.2 - semver: ^7.3.2 - tar: ^6.0.2 - which: ^2.0.2 - bin: - node-gyp: bin/node-gyp.js - checksum: 08582720f28f9a9bb64bc9cbe2f58b159c0258326a9c898e4e95d2f2d8002f44602338111ebf980e5aa47a3421e071525b758923b76855d780fab8cc03279ae0 - languageName: node - linkType: hard - "node-gyp@npm:^8.1.0, node-gyp@npm:latest": version: 8.3.0 resolution: "node-gyp@npm:8.3.0" @@ -25419,56 +25312,6 @@ __metadata: languageName: node linkType: hard -"node-sass-magic-importer@npm:^5.3.2": - version: 5.3.2 - resolution: "node-sass-magic-importer@npm:5.3.2" - dependencies: - css-node-extract: ^2.1.3 - css-selector-extract: ^3.3.6 - findup-sync: ^3.0.0 - glob: ^7.1.3 - object-hash: ^1.3.1 - postcss-scss: ^2.0.0 - resolve: ^1.10.1 - checksum: 1f0fac9d8902d6a75dd3971e2bf29776ba3c0be7293ab1e6235ef278c5448ccdb9ccad07a9fd90938b51dbe24d8c6e0d2bcb2c93211120c29b65b918933b4061 - languageName: node - linkType: hard - -"node-sass-once-importer@npm:5.3.2": - version: 5.3.2 - resolution: "node-sass-once-importer@npm:5.3.2" - dependencies: - node-sass-magic-importer: ^5.3.2 - checksum: 33058549e974f59e28785461c7118045cc9d4741905f5c6111b76727eb5bedbccd237553c98282f5e7815df1ac453e1eddb7ffab2e6835adf215a2a49870fdba - languageName: node - linkType: hard - -"node-sass@npm:5.0.0": - version: 5.0.0 - resolution: "node-sass@npm:5.0.0" - dependencies: - async-foreach: ^0.1.3 - chalk: ^1.1.1 - cross-spawn: ^7.0.3 - gaze: ^1.0.0 - get-stdin: ^4.0.1 - glob: ^7.0.3 - lodash: ^4.17.15 - meow: ^3.7.0 - mkdirp: ^0.5.1 - nan: ^2.13.2 - node-gyp: ^7.1.0 - npmlog: ^4.0.0 - request: ^2.88.0 - sass-graph: 2.2.5 - stdout-stream: ^1.4.0 - true-case-path: ^1.0.2 - bin: - node-sass: bin/node-sass - checksum: 31e9da00c316f26ea0c843043e0e7b49a8a64de8cf4ea33b4bd4ad4cb121429cdcb5f62e1343747ef8dbb547c534f8b1a5d18a3b31721b9d3b80017e7398d4ac - languageName: node - linkType: hard - "nodemon@npm:2.0.15": version: 2.0.15 resolution: "nodemon@npm:2.0.15" @@ -25818,7 +25661,7 @@ __metadata: languageName: node linkType: hard -"npmlog@npm:^4.0.0, npmlog@npm:^4.1.2": +"npmlog@npm:^4.1.2": version: 4.1.2 resolution: "npmlog@npm:4.1.2" dependencies: @@ -25990,13 +25833,6 @@ __metadata: languageName: node linkType: hard -"object-hash@npm:^1.3.1": - version: 1.3.1 - resolution: "object-hash@npm:1.3.1" - checksum: fdcb957a2f15a9060e30655a9f683ba1fc25dfb8809a73d32e9634bec385a2f1d686c707ac1e5f69fb773bc12df03fb64c77ce3faeed83e35f4eb1946cb1989e - languageName: node - linkType: hard - "object-hash@npm:^2.0.1, object-hash@npm:^2.0.3": version: 2.2.0 resolution: "object-hash@npm:2.2.0" @@ -28204,7 +28040,7 @@ __metadata: languageName: node linkType: hard -"postcss-scss@npm:^2.0.0, postcss-scss@npm:^2.1.1": +"postcss-scss@npm:^2.1.1": version: 2.1.1 resolution: "postcss-scss@npm:2.1.1" dependencies: @@ -28347,17 +28183,6 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^6.0.14": - version: 6.0.23 - resolution: "postcss@npm:6.0.23" - dependencies: - chalk: ^2.4.1 - source-map: ^0.6.1 - supports-color: ^5.4.0 - checksum: cc6cb2c1dbcdefa6f57a71d67fe535c9e96543298bbe28f9a6a64c4f1e21b6127113890dd4cda8873d3f4e6613a0566b7b4bbb230204f3a9a309190bda065d81 - 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": version: 7.0.39 resolution: "postcss@npm:7.0.39" @@ -30201,7 +30026,7 @@ __metadata: languageName: unknown linkType: soft -"request@npm:^2.88.0, request@npm:^2.88.2": +"request@npm:^2.88.2": version: 2.88.2 resolution: "request@npm:2.88.2" dependencies: @@ -30359,7 +30184,7 @@ __metadata: languageName: node linkType: hard -"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.3.2, resolve@npm:^1.4.0": +"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.3.2, resolve@npm:^1.4.0": version: 1.20.0 resolution: "resolve@npm:1.20.0" dependencies: @@ -30392,7 +30217,7 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@^1.1.6#~builtin, resolve@patch:resolve@^1.1.7#~builtin, resolve@patch:resolve@^1.10.0#~builtin, resolve@patch:resolve@^1.10.1#~builtin, resolve@patch:resolve@^1.12.0#~builtin, resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.17.0#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.3.2#~builtin, resolve@patch:resolve@^1.4.0#~builtin": +"resolve@patch:resolve@^1.1.6#~builtin, resolve@patch:resolve@^1.1.7#~builtin, resolve@patch:resolve@^1.10.0#~builtin, resolve@patch:resolve@^1.12.0#~builtin, resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.17.0#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.3.2#~builtin, resolve@patch:resolve@^1.4.0#~builtin": version: 1.20.0 resolution: "resolve@patch:resolve@npm%3A1.20.0#~builtin::version=1.20.0&hash=07638b" dependencies: @@ -30735,20 +30560,6 @@ __metadata: languageName: node linkType: hard -"sass-graph@npm:2.2.5": - version: 2.2.5 - resolution: "sass-graph@npm:2.2.5" - dependencies: - glob: ^7.0.0 - lodash: ^4.0.0 - scss-tokenizer: ^0.2.3 - yargs: ^13.3.2 - bin: - sassgraph: bin/sassgraph - checksum: 283b6e5a38c8b4fca77cdc4fc1da9641679120dba80e89361c82b6a3975f90d01cc78129f9f8fd148822e5a648f540c58c9a38b8c2b11ca97abc4f381613c013 - languageName: node - linkType: hard - "sass-loader@npm:10.2.0, sass-loader@npm:^10.1.1": version: 10.2.0 resolution: "sass-loader@npm:10.2.0" @@ -30785,6 +30596,19 @@ __metadata: languageName: node linkType: hard +"sass@npm:1.57.1": + version: 1.57.1 + resolution: "sass@npm:1.57.1" + dependencies: + chokidar: ">=3.0.0 <4.0.0" + immutable: ^4.0.0 + source-map-js: ">=0.6.2 <2.0.0" + bin: + sass: sass.js + checksum: 734a08781bcbe0e8defb2d54864e7012014ed3e68ba5fcb766189b002929019fc37b2f83a18d4be0b5f69ad77317c92396ce6112447ab47a194ed600ae1afb27 + languageName: node + linkType: hard + "sax@npm:>=0.6.0, sax@npm:^1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -30870,16 +30694,6 @@ __metadata: languageName: node linkType: hard -"scss-tokenizer@npm:^0.2.3": - version: 0.2.3 - resolution: "scss-tokenizer@npm:0.2.3" - dependencies: - js-base64: ^2.1.8 - source-map: ^0.4.2 - checksum: ad78bba4466ff7aa6449931a57a980479223c3cad9eccf2180251c2f6fce5b3d982a51f924709e0a0bb2d328dedbb2fad0ccb2a5fdc175513a27cb4e8cf8cfd2 - languageName: node - linkType: hard - "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -31583,6 +31397,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": + version: 1.0.2 + resolution: "source-map-js@npm:1.0.2" + checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c + languageName: node + linkType: hard + "source-map-js@npm:^0.6.2": version: 0.6.2 resolution: "source-map-js@npm:0.6.2" @@ -31590,13 +31411,6 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": - version: 1.0.2 - resolution: "source-map-js@npm:1.0.2" - checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c - languageName: node - linkType: hard - "source-map-resolve@npm:^0.5.0, source-map-resolve@npm:^0.5.2": version: 0.5.3 resolution: "source-map-resolve@npm:0.5.3" @@ -31644,15 +31458,6 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.4.2": - version: 0.4.4 - resolution: "source-map@npm:0.4.4" - dependencies: - amdefine: ">=0.0.4" - checksum: b31992fcb4a2a6c335617f187bd36f392896dfcc111830ebdb8b716923cf6554b665833b975fc998bdf3a63881b2c8b4c5c34fda0280357b8c18fe6aa5d148ea - languageName: node - linkType: hard - "source-map@npm:^0.5.0, source-map@npm:^0.5.6, source-map@npm:^0.5.7, source-map@npm:~0.5.3": version: 0.5.7 resolution: "source-map@npm:0.5.7" @@ -32032,15 +31837,6 @@ __metadata: languageName: node linkType: hard -"stdout-stream@npm:^1.4.0": - version: 1.4.1 - resolution: "stdout-stream@npm:1.4.1" - dependencies: - readable-stream: ^2.0.1 - checksum: 205bee8c3ba4e1e1d471b9302764405d2ee5dd272af6e9a71c95a9af6cf2ad8f4d102099a917c591ba9e14c1b2b5f5244f7a526e9d3cf311327cecd7c2bd4c2e - languageName: node - linkType: hard - "store2@npm:^2.12.0": version: 2.12.0 resolution: "store2@npm:2.12.0" @@ -32229,17 +32025,6 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^3.0.0, string-width@npm:^3.1.0": - version: 3.1.0 - resolution: "string-width@npm:3.1.0" - dependencies: - emoji-regex: ^7.0.1 - is-fullwidth-code-point: ^2.0.0 - strip-ansi: ^5.1.0 - checksum: 57f7ca73d201682816d573dc68bd4bb8e1dff8dc9fcf10470fdfc3474135c97175fec12ea6a159e67339b41e86963112355b64529489af6e7e70f94a7caf08b2 - languageName: node - linkType: hard - "string.prototype.codepointat@npm:^0.2.1": version: 0.2.1 resolution: "string.prototype.codepointat@npm:0.2.1" @@ -32429,7 +32214,7 @@ __metadata: languageName: node linkType: hard -"strip-ansi@npm:^5.0.0, strip-ansi@npm:^5.1.0, strip-ansi@npm:^5.2.0": +"strip-ansi@npm:^5.1.0, strip-ansi@npm:^5.2.0": version: 5.2.0 resolution: "strip-ansi@npm:5.2.0" dependencies: @@ -32788,7 +32573,7 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^5.3.0, supports-color@npm:^5.4.0, supports-color@npm:^5.5.0": +"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" dependencies: @@ -33731,15 +33516,6 @@ __metadata: languageName: node linkType: hard -"true-case-path@npm:^1.0.2": - version: 1.0.3 - resolution: "true-case-path@npm:1.0.3" - dependencies: - glob: ^7.1.2 - checksum: 2e2e3bf37b4b05db2e2a1d60329960a4aa697ad7a89bd97c66f5f4da83977897c29c704276e62bca62d055d8078065bc08a1c7a01f409de11c6592af8b442cbe - languageName: node - linkType: hard - "true-case-path@npm:^2.2.1": version: 2.2.1 resolution: "true-case-path@npm:2.2.1" @@ -35883,17 +35659,6 @@ __metadata: languageName: node linkType: hard -"wrap-ansi@npm:^5.1.0": - version: 5.1.0 - resolution: "wrap-ansi@npm:5.1.0" - dependencies: - ansi-styles: ^3.2.0 - string-width: ^3.0.0 - strip-ansi: ^5.0.0 - checksum: 9b48c862220e541eb0daa22661b38b947973fc57054e91be5b0f2dcc77741a6875ccab4ebe970a394b4682c8dfc17e888266a105fb8b0a9b23c19245e781ceae - languageName: node - linkType: hard - "wrap-ansi@npm:^6.2.0": version: 6.2.0 resolution: "wrap-ansi@npm:6.2.0" @@ -36172,16 +35937,6 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^13.1.2": - version: 13.1.2 - resolution: "yargs-parser@npm:13.1.2" - dependencies: - camelcase: ^5.0.0 - decamelize: ^1.2.0 - checksum: c8bb6f44d39a4acd94462e96d4e85469df865de6f4326e0ab1ac23ae4a835e5dd2ddfe588317ebf80c3a7e37e741bd5cb0dc8d92bcc5812baefb7df7c885e86b - languageName: node - linkType: hard - "yargs-parser@npm:^18.1.2": version: 18.1.3 resolution: "yargs-parser@npm:18.1.3" @@ -36216,24 +35971,6 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^13.3.2": - version: 13.3.2 - resolution: "yargs@npm:13.3.2" - dependencies: - cliui: ^5.0.0 - find-up: ^3.0.0 - get-caller-file: ^2.0.1 - require-directory: ^2.1.1 - require-main-filename: ^2.0.0 - set-blocking: ^2.0.0 - string-width: ^3.0.0 - which-module: ^2.0.0 - y18n: ^4.0.0 - yargs-parser: ^13.1.2 - checksum: 75c13e837eb2bb25717957ba58d277e864efc0cca7f945c98bdf6477e6ec2f9be6afa9ed8a876b251a21423500c148d7b91e88dee7adea6029bdec97af1ef3e8 - languageName: node - linkType: hard - "yargs@npm:^15.0.2, yargs@npm:^15.3.1, yargs@npm:^15.4.1": version: 15.4.1 resolution: "yargs@npm:15.4.1"