From c478db0283e1a78be4dbcbeac0a5da276fffc923 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 13:50:32 +0100 Subject: [PATCH 1/9] feat: introduce `.dnb-core-style` class to use in wrappers - in case we avoid using the code body styles. --- .../gatsby-browser.js | 1 + .../uilib/usage/customisation/styling.md | 10 + .../src/shared/menu/SidebarMenu.js | 1 + .../src/shared/menu/StickyMenuBar.js | 7 +- .../src/shared/parts/Layout.js | 7 +- .../dnb-ui-lib/src/style/core/dnb-core.scss | 4 - packages/dnb-ui-lib/src/style/core/reset.scss | 1048 +++++++++-------- .../dnb-ui-lib/src/style/core/scopes.scss | 22 +- .../dnb-ui-lib/src/style/dnb-ui-basis.scss | 2 +- .../dnb-ui-lib/src/style/dnb-ui-body.scss | 6 +- .../src/style/elements/typography.scss | 18 +- .../theme-ui/helper-classes/ui-spacing.scss | 16 +- 12 files changed, 586 insertions(+), 556 deletions(-) diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js index 7c0eb362fe1..2b44177e16f 100644 --- a/packages/dnb-design-system-portal/gatsby-browser.js +++ b/packages/dnb-design-system-portal/gatsby-browser.js @@ -8,6 +8,7 @@ import { applyPageFocus } from 'dnb-ui-lib/src/shared/tools' // Load dev styles (to use hot reloading, we do have to import the styles in here) if (process.env.NODE_ENV === 'development') { require('dnb-ui-lib/src/style/core') // import the core styles + // require('dnb-ui-lib/src/style/basis') // in case we want to test ".dnb-core-style" require('dnb-ui-lib/src/style/patterns') // import ony patterns require('dnb-ui-lib/src/style/components') // import ony components // // require('dnb-ui-lib/src/style/themes/open-banking') // import the "open-banking" theme diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md index 97f7afaca3e..3f24135165b 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md @@ -44,6 +44,16 @@ The following Diagram gives an overall overview how the packages are structured. The **dnb-ui-core** package includes some styles witch effects the global scope (body and CSS reset). To avoid interference with existing styles, let's say a header or a menu, You could only use the **dnb-ui-basis** package in combination with other packages like **dnb-theme-ui** and **dnb-ui-components**. +### Use Body Styles + +If You neither include the **dnb-ui-core** nor the **dnb-ui-body** package, then You ending up having no Eufemia styles for the Document ``. To having them inside a wrapper anyway, simply use the following helper class: `.dnb-core-style` + +```html +
+ Wrapper with the DNB Body Styles +
+``` + ### Example imports ```js diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js index b82044a8bf1..d4acc90bbf4 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js @@ -482,6 +482,7 @@ export default class SidebarLayout extends PureComponent { return ( diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js index 4036c3fb4c2..cb1016bc558 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js @@ -105,7 +105,12 @@ const Content = ({ className, children }) => ( {children} diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss index cd19855aaa4..a3ce303de52 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss @@ -4,7 +4,6 @@ */ // core imports -@import './reset.scss'; @import './utilities.scss'; @import './properties.scss'; @import './fonts.scss'; @@ -14,7 +13,4 @@ // Global body style body { @include bodyDefault(); - @media print { - background-color: white; - } } diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss index 52eb87b8709..7adfefea060 100644 --- a/packages/dnb-ui-lib/src/style/core/reset.scss +++ b/packages/dnb-ui-lib/src/style/core/reset.scss @@ -3,526 +3,530 @@ * */ -/** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - -*, -::before, -::after { - background-repeat: no-repeat; /* 1 */ - box-sizing: border-box; /* 2 */ -} - -/** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - -::before, -::after { - text-decoration: inherit; /* 1 */ - vertical-align: inherit; /* 2 */ -} - -/** - * 1. Use the default cursor in all browsers (opinionated). - * 2. Use the default user interface font in all browsers (opinionated). - * 3. Correct the line height in all browsers. - * 4. Use a 4-space tab width in all browsers (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). - */ - -html { - cursor: default; /* 1 */ - font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ Segoe UI, /* Android 4+ */ Roboto, - /* Ubuntu 10.10+ */ Ubuntu, /* Gnome 3+ */ Cantarell, - /* KDE Plasma 5+ */ Noto Sans, /* fallback */ sans-serif, - /* macOS emoji */ 'Apple Color Emoji', - /* Windows emoji */ 'Segoe UI Emoji', - /* Windows emoji */ 'Segoe UI Symbol', - /* Linux emoji */ 'Noto Color Emoji'; /* 2 */ - - line-height: 1.15; /* 3 */ - -moz-tab-size: 4; /* 4 */ - tab-size: 4; /* 4 */ - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ -} - -/* Sections - */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/* Grouping content - */ - -/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; -} - -/** - * Remove the list style on navigation lists in all browsers (opinionated). - */ - -nav ol, -nav ul { - list-style: none; -} - -/** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: - /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, - /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, - /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, - /* Linux/OpenOffice fallback */ Liberation Mono, - /* fallback */ monospace; /* 1 */ - - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Add the correct text decoration in Edge, IE, Opera, and Safari. - */ - -abbr[title] { - text-decoration: underline; - text-decoration: underline dotted; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: - /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, - /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, - /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, - /* Linux/OpenOffice fallback */ Liberation Mono, - /* fallback */ monospace; /* 1 */ - - font-size: 1em; /* 2 */ -} - -/* - * Remove the text shadow on text selections in Firefox 61- (opinionated). - * 1. Restore the coloring undone by defining the text shadow - * in all browsers (opinionated). - */ - -::-moz-selection { - background-color: #b3d4fc; /* 1 */ - color: #000; /* 1 */ - text-shadow: none; -} - -/* Embedded content - */ - -/* - * Change the alignment on media elements in all browers (opinionated). - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Change the fill color to match the text color in all browsers (opinionated). - */ - -svg:not([fill]) { - fill: currentColor; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Tabular data - */ - -/** - * Collapse border spacing in all browsers (opinionated). - */ - -table { - border-collapse: collapse; -} - -/* Forms - */ - -/** - * Inherit styling in all browsers (opinionated). - */ - -button, -input, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -/** - * Remove the margin in Safari. - */ - -button, -input, -select { - margin: 0; -} - -/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. - */ - -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35rem 0.75rem 0.625rem; -} - -/** - * Show the overflow in Edge and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge and IE. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -select { - text-transform: none; -} - -/** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. - * 3. Change the resize direction on textareas in all browsers (opinionated). - */ - -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ - resize: vertical; /* 3 */ -} - -/** - * Remove the padding in IE 10-. - */ - -[type='checkbox'], -[type='radio'] { - padding: 0; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/* Interactive - */ - -/* - * Add the correct display in Edge and IE. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - */ - -/* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ -} - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} - -/* Accessibility - */ - -/** - * Change the cursor on busy elements in all browsers (opinionated). - */ - -[aria-busy='true'] { - cursor: progress; -} - -/* - * Change the cursor on control elements in all browsers (opinionated). - */ - -[aria-controls] { - cursor: pointer; -} - -/* - * Change the cursor on disabled, not-editable, or otherwise - * inoperable elements in all browsers (opinionated). - */ - -[aria-disabled='true'], -[disabled] { - cursor: not-allowed; -} - -/* - * Change the display on visually hidden accessible elements - * in all browsers (opinionated). - */ - -[aria-hidden='false'][hidden]:not(:focus) { - clip: rect(0, 0, 0, 0); - display: inherit; - position: absolute; +@mixin globalReset() { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + + *, + ::before, + ::after { + background-repeat: no-repeat; /* 1 */ + box-sizing: border-box; /* 2 */ + } + + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + + ::before, + ::after { + text-decoration: inherit; /* 1 */ + vertical-align: inherit; /* 2 */ + } + + /** + * 1. Use the default cursor in all browsers (opinionated). + * 2. Use the default user interface font in all browsers (opinionated). + * 3. Correct the line height in all browsers. + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + * 6. Breaks words to prevent overflow in all browsers (opinionated). + */ + + html { + cursor: default; /* 1 */ + font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system, + /* Windows 6+ */ Segoe UI, /* Android 4+ */ Roboto, + /* Ubuntu 10.10+ */ Ubuntu, /* Gnome 3+ */ Cantarell, + /* KDE Plasma 5+ */ Noto Sans, /* fallback */ sans-serif, + /* macOS emoji */ 'Apple Color Emoji', + /* Windows emoji */ 'Segoe UI Emoji', + /* Windows emoji */ 'Segoe UI Symbol', + /* Linux emoji */ 'Noto Color Emoji'; /* 2 */ + + line-height: 1.15; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -ms-text-size-adjust: 100%; /* 5 */ + -webkit-text-size-adjust: 100%; /* 5 */ + word-break: break-word; /* 6 */ + } + + /* Sections + */ + + /** + * Remove the margin in all browsers (opinionated). + */ + + body { + margin: 0; + } +} + +@mixin reset() { + /* Grouping content + */ + + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * Add the correct display in IE. + */ + + main { + display: block; + } + + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + + nav ol, + nav ul { + list-style: none; + } + + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: + /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, + /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, + /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, + /* Linux/OpenOffice fallback */ Liberation Mono, + /* fallback */ monospace; /* 1 */ + + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + + abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: + /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, + /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, + /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, + /* Linux/OpenOffice fallback */ Liberation Mono, + /* fallback */ monospace; /* 1 */ + + font-size: 1em; /* 2 */ + } + + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + + ::-moz-selection { + background-color: #b3d4fc; /* 1 */ + color: #000; /* 1 */ + text-shadow: none; + } + + /* Embedded content + */ + + /* + * Change the alignment on media elements in all browers (opinionated). + */ + + audio, + canvas, + iframe, + img, + svg, + video { + vertical-align: middle; + } + + /** + * Add the correct display in IE 9-. + */ + + audio, + video { + display: inline-block; + } + + /** + * Add the correct display in iOS 4-7. + */ + + audio:not([controls]) { + display: none; + height: 0; + } + + /** + * Remove the border on images inside links in IE 10-. + */ + + img { + border-style: none; + } + + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + + svg:not([fill]) { + fill: currentColor; + } + + /** + * Hide the overflow in IE. + */ + + svg:not(:root) { + overflow: hidden; + } + + /* Tabular data + */ + + /** + * Collapse border spacing in all browsers (opinionated). + */ + + table { + border-collapse: collapse; + } + + /* Forms + */ + + /** + * Inherit styling in all browsers (opinionated). + */ + + button, + input, + select, + textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + /** + * Remove the margin in Safari. + */ + + button, + input, + select { + margin: 0; + } + + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + + button { + overflow: visible; /* 1 */ + text-transform: none; /* 2 */ + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type='button'], + [type='reset'], + [type='submit'] { + -webkit-appearance: button; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35rem 0.75rem 0.625rem; + } + + /** + * Show the overflow in Edge and IE. + */ + + input { + overflow: visible; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + */ + + legend { + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; /* 1 */ + } + + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ + } + + /** + * Remove the inheritance of text transform in Firefox. + */ + + select { + text-transform: none; + } + + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + + textarea { + margin: 0; /* 1 */ + overflow: auto; /* 2 */ + resize: vertical; /* 3 */ + } + + /** + * Remove the padding in IE 10-. + */ + + [type='checkbox'], + [type='radio'] { + padding: 0; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + + ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + ::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + + ::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + + :-moz-focusring { + outline: 1px dotted ButtonText; + } + + /* Interactive + */ + + /* + * Add the correct display in Edge and IE. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Scripting + */ + + /** + * Add the correct display in IE 9-. + */ + + canvas { + display: inline-block; + } + + /** + * Add the correct display in IE. + */ + + template { + display: none; + } + + /* User interaction + */ + + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + + a, + area, + button, + input, + label, + select, + summary, + textarea, + [tabindex] { + -ms-touch-action: manipulation; /* 1 */ + touch-action: manipulation; /* 2 */ + } + + /** + * Add the correct display in IE 10-. + */ + + [hidden] { + display: none; + } + + /* Accessibility + */ + + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + + [aria-busy='true'] { + cursor: progress; + } + + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + + [aria-controls] { + cursor: pointer; + } + + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + + [aria-disabled='true'], + [disabled] { + cursor: not-allowed; + } + + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ + + [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; + } } diff --git a/packages/dnb-ui-lib/src/style/core/scopes.scss b/packages/dnb-ui-lib/src/style/core/scopes.scss index 059731ca1ed..badf71b0cc4 100644 --- a/packages/dnb-ui-lib/src/style/core/scopes.scss +++ b/packages/dnb-ui-lib/src/style/core/scopes.scss @@ -3,7 +3,10 @@ * */ +@import './reset.scss'; + @mixin bodyDefault() { + &, *, ::before, ::after { @@ -11,6 +14,15 @@ box-sizing: border-box; } + &, + ::before, + ::after { + text-decoration: inherit; + vertical-align: inherit; + } + + @include reset(); + font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -21,16 +33,14 @@ @include numberFeature(lining-nums, lnum); + @media print { + background-color: white; + } + @content; } @mixin componentReset() { - ::before, - ::after { - text-decoration: inherit; - vertical-align: inherit; - } - @include bodyDefault(); font-size: 1em; diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss b/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss index b0025e5c7f5..41c2fc19c4e 100644 --- a/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss +++ b/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss @@ -13,6 +13,6 @@ // In order to be able to have the body stiles inside a app wrapper, // we have this class helper to get the body styles inside the wrapper as well // without using the body -.dnb-app-content { +.dnb-core-style { @include bodyDefault(); } diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-body.scss b/packages/dnb-ui-lib/src/style/dnb-ui-body.scss index bd0cf110f37..94ded47a8b3 100644 --- a/packages/dnb-ui-lib/src/style/dnb-ui-body.scss +++ b/packages/dnb-ui-lib/src/style/dnb-ui-body.scss @@ -3,15 +3,13 @@ * */ -@import './core/reset.scss'; @import './core/utilities.scss'; @import './core/properties.scss'; @import './core/scopes.scss'; +@include globalReset(); + // Global body style body { @include bodyDefault(); - @media print { - background-color: white; - } } diff --git a/packages/dnb-ui-lib/src/style/elements/typography.scss b/packages/dnb-ui-lib/src/style/elements/typography.scss index 7dd30f735e4..9013d186b24 100644 --- a/packages/dnb-ui-lib/src/style/elements/typography.scss +++ b/packages/dnb-ui-lib/src/style/elements/typography.scss @@ -122,13 +122,13 @@ .dnb-h4, .dnb-h5, .dnb-h6, -// make exception on headings wtich has no class attribute -h1:not([class]), -h2:not([class]), -h3:not([class]), -h4:not([class]), -h5:not([class]), -h6:not([class]) { +// make exception on headings wtich are inside of dnb-core-style +.dnb-core-style h1, +.dnb-core-style h2, +.dnb-core-style h3, +.dnb-core-style h4, +.dnb-core-style h5, +.dnb-core-style h6 { @include headingsStyle(); } @@ -173,8 +173,8 @@ h6:not([class]) { } .dnb-p, -// make exception on the p tag by checking if there is a class attribute -p:not([class]) { +// make exception on the p tag is inside of .dnb-core-style +.dnb-core-style p { @include paragraphStyle(); b, strong { diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss index 5c6db0c5585..24136df4b0c 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss @@ -12,10 +12,10 @@ h4, h5, h6, - h3:not([class]), - h4:not([class]), - h5:not([class]), - h6:not([class]), + .dnb-core-style h3, + .dnb-core-style h4, + .dnb-core-style h5, + .dnb-core-style h6, .dnb-h3, .dnb-lead, .dnb-h4, @@ -25,12 +25,12 @@ } h1, - h1:not([class]), + .dnb-core-style h1, .dnb-h1 { margin: 3rem 0 2.5rem; } h2, - h2:not([class]), + .dnb-core-style h2, .dnb-h2 { margin: 3rem 0 1rem; } @@ -40,9 +40,9 @@ .dnb-ol, .dnb-dl, .dnb-blockquote, - .dnb-pre, p, - p:not([class]), + .dnb-core-style p, + .dnb-pre, ul, ol, dl, From 96b7815cb892fed58e1cb1bc37768780e8192bb2 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:09:23 +0100 Subject: [PATCH 2/9] Portal: add missing css classes --- packages/dnb-design-system-portal/src/pages/404.js | 6 +++--- .../src/shared/parts/uilib/ItemWrapper.js | 4 ++-- .../src/uilib/performance-test/PerformanceTest.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dnb-design-system-portal/src/pages/404.js b/packages/dnb-design-system-portal/src/pages/404.js index 074dd746ef2..d5e1d854090 100644 --- a/packages/dnb-design-system-portal/src/pages/404.js +++ b/packages/dnb-design-system-portal/src/pages/404.js @@ -17,9 +17,9 @@ export default class PageNotFound extends PureComponent { return (
-

404

-

We couldn't find that page:

-

+

404

+

We couldn't find that page:

+

There's not a page at {pathname}

diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js index 89f94f30c5b..bade6380385 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js +++ b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js @@ -206,9 +206,9 @@ class ItemWrapper extends PureComponent { return (
{!hideTabs ? ( -

{title}

+

{title}

) : ( -

+

{title} diff --git a/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js b/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js index a30db4a5614..9c400500434 100644 --- a/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js +++ b/packages/dnb-design-system-portal/src/uilib/performance-test/PerformanceTest.js @@ -119,7 +119,7 @@ export default class PerformanceTest extends Component { />


-

Rendered Components

+

Rendered Components

{this.components}

{text}

From 06db79b7d48db6579262ffc032452b26c61ddbe1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:12:08 +0100 Subject: [PATCH 3/9] restructure styles --- packages/dnb-ui-lib/src/style/core/reset.scss | 46 +++++++++---------- .../dnb-ui-lib/src/style/core/scopes.scss | 15 ------ .../dnb-ui-lib/src/style/dnb-ui-basis.scss | 6 +++ .../dnb-ui-lib/src/style/dnb-ui-core.scss | 17 +++++-- 4 files changed, 43 insertions(+), 41 deletions(-) diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss index 7adfefea060..8e2cff1fda2 100644 --- a/packages/dnb-ui-lib/src/style/core/reset.scss +++ b/packages/dnb-ui-lib/src/style/core/reset.scss @@ -4,29 +4,6 @@ */ @mixin globalReset() { - /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - - *, - ::before, - ::after { - background-repeat: no-repeat; /* 1 */ - box-sizing: border-box; /* 2 */ - } - - /** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - - ::before, - ::after { - text-decoration: inherit; /* 1 */ - vertical-align: inherit; /* 2 */ - } - /** * 1. Use the default cursor in all browsers (opinionated). * 2. Use the default user interface font in all browsers (opinionated). @@ -69,6 +46,29 @@ } @mixin reset() { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + + *, + ::before, + ::after { + background-repeat: no-repeat; /* 1 */ + box-sizing: border-box; /* 2 */ + } + + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + + ::before, + ::after { + text-decoration: inherit; /* 1 */ + vertical-align: inherit; /* 2 */ + } + /* Grouping content */ diff --git a/packages/dnb-ui-lib/src/style/core/scopes.scss b/packages/dnb-ui-lib/src/style/core/scopes.scss index badf71b0cc4..dbe697a0ada 100644 --- a/packages/dnb-ui-lib/src/style/core/scopes.scss +++ b/packages/dnb-ui-lib/src/style/core/scopes.scss @@ -6,21 +6,6 @@ @import './reset.scss'; @mixin bodyDefault() { - &, - *, - ::before, - ::after { - background-repeat: no-repeat; - box-sizing: border-box; - } - - &, - ::before, - ::after { - text-decoration: inherit; - vertical-align: inherit; - } - @include reset(); font-family: sans-serif; diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss b/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss index 41c2fc19c4e..461969b9056 100644 --- a/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss +++ b/packages/dnb-ui-lib/src/style/dnb-ui-basis.scss @@ -10,6 +10,12 @@ @import './core/fonts.scss'; @import './core/helper-classes.scss'; +// The only style we use on body is to reset the margin +// the rest goas inside dnb-core-style +body { + margin: 0; +} + // In order to be able to have the body stiles inside a app wrapper, // we have this class helper to get the body styles inside the wrapper as well // without using the body diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-core.scss b/packages/dnb-ui-lib/src/style/dnb-ui-core.scss index 41fff46198f..0b0b2eead60 100644 --- a/packages/dnb-ui-lib/src/style/dnb-ui-core.scss +++ b/packages/dnb-ui-lib/src/style/dnb-ui-core.scss @@ -3,6 +3,17 @@ * */ -// body and reset -@import './dnb-ui-basis.scss'; -@import './dnb-ui-body.scss'; +// core imports +@import './core/utilities.scss'; +@import './core/properties.scss'; +@import './core/scopes.scss'; +@import './core/fonts.scss'; +@import './core/helper-classes.scss'; + +@include globalReset(); + +// Global body style +body, +.dnb-core-style { + @include bodyDefault(); +} From d6c3347ac0516a186a1b8277e05885d199a2d02d Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:24:38 +0100 Subject: [PATCH 4/9] fix secondary button outline border --- packages/dnb-ui-lib/src/components/button/style/_button.scss | 1 - .../src/components/button/style/themes/dnb-button-theme-ui.scss | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss index b39290850bf..1b73804d3a3 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss @@ -210,7 +210,6 @@ // make sure we style an Anchor like a button a.dnb-button { -webkit-appearance: none; // because we have "appearance: button" in reset.scss - box-shadow: none; // some correction .dnb-button__icon { diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss index 057d4cceefa..f4b79eebc25 100644 --- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss @@ -13,6 +13,7 @@ .dnb-button { border: none; + box-shadow: none; &--secondary:not([disabled]):not(.dnb-button--has-text) &__icon { color: var(--color-emerald-green); } @@ -41,6 +42,7 @@ color: var(--color-sea-green); background-color: var(--color-white); + @include fakeBorder(var(--color-sea-green-alt), 1px, inset); @include buttonHover(var(--color-sea-green), var(--color-white)); @include buttonFocus(var(--color-sea-green), var(--color-white)); @include buttonActive( From 94dc7767ae8f5d99bfa7a7d0cc44c33ef60947b8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:27:33 +0100 Subject: [PATCH 5/9] update new secondary button snapshot --- ...atch-dnb-button-secondary-1-b265a.snap.png | Bin 5011 -> 6214 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/button-screenshot-test-js-button-screenshot-have-to-match-dnb-button-secondary-1-b265a.snap.png b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/button-screenshot-test-js-button-screenshot-have-to-match-dnb-button-secondary-1-b265a.snap.png index 44ea7a858b8ce88ad1116b00f958c4049dcb39ef..d19d4366e5b977d699246bb70d4052e77ca11e00 100644 GIT binary patch literal 6214 zcmb_hbyQSexE%yRT1jb97?7bG5%>`TLzi@S4kaO}fJh@Cjl|Fl z4e$Ej`~SVQX3gAn?>*l+=R4=@y}vz?8fpr}1hfPo5QrG6D5nJiVQ~Z3ijQ#reP=%X z0sLTjYAMKoDn{wIL7=A~sGPKp?^iVPy?M;+QpeGO3V49!$$W!M#IrCQ;;Kp0f+?+q zf(YC=(r5cT`i8Zc3$`=5aLS?kJum!l<6ZQnd^UiIbviaa-2`ZO--GH zq|6!Uf75BHG3IzABQ(XzYF(mZT{4|dLE*+JoSH2H8ylNQWUi zmjI%v+Or4gRq~G_vmM~@Q^!A3b3Fth=5mQF?##?s?T2m;^77Khi^-YJ{~pPZrE8Mw z8FXEpr$Acff3lWdopq0NcIx-wha4u#6&C(HJatf8Z0;K#%{G{779r;3iq(aWlj&(X zykugO8vXd!{^tIe+SJQiSe`HB*-hNnz{3yjcqF_(Rq5IoMIQ^0lOvL?l7FR`YIL{- z2ZKoBXk=v}5Ls&GM_mUxjzN+LZ0wgQEI|R+F7z>D$Navl9Nb(RzZdG)#(yx=;ga^s zaoZX{>S9tYmhX=F_6%lc?Y5Kc!z<)AG_-7BgQ>D&rzE(Ou#QkP3^~NJd7ic=@{WBI z3?7#B9$r2o&NL7^H;6Ead9SkqV_oKo*za+;_L5wxZUW98)^6D7iDI8e?AEV(UYBGt>fbeztafn3rc0_ z$3*5kkV?1BPVCTMC0?sdDXH>?(pbn?(K=QrnI{QDSHN8WEtgUFb*51N)(GM(igNLH zKd)h9xUkECskP_UF)!QJr_?MX{RroM7}hNq3{# zsHv9Mh*Veh0$O5FCiS8rr&IP!o$*_DK3QRx)tgrTCKmw=+Ny73DB1oTeV&(5&gD%- z#a`oyZ+43@dQf39*=p*|2`|_%oxY=!>1m=-o`<)UEk&t-t$cT9=vxAtXQ~{t8)V4I zw&nYCj7@`5=kP{gc39QhqwSqP3kY5)V`H%xcTH5{xIx;Zmx8Yx;6Y2^+w*DjN{HUXaDVT-#dC2AMRh6J<`f136Jxr+G6IS6vH#UazusP3=yf67fq&{I0e1P>)m zO`V?#;AW`Eo6F%$o};aP|B57f=Q$Zz*f~)Uvp<(m+a11gbGZegkB!P3|7jC*Fck^( zjlKLcKrH8Ux3BB&wlNDn8irnIOiYiEPjsuPv%O8{BRW6yEnL$B0|{ad3gY}b8xKqm zE52ERFpiO{-sScaAtwpJ>Q;upybqd|PFAL&-5MVV%l2l0qu%Ui*thLTuc~{myVp)? zIbfsm-tj+~JPI-90Yz#lJ6{mGdVlT}a)JmtNG&V^Jk}o-Uta2GX7Yb`G4gIXA)zWP z942~XZssdWczwRLHfx60!6TTg9!GCcR>YRJwg#ClS2)>B8T<|5{56Zp2^E29Xc))D zY7LlOpN?l^m#kWTmAp-E47~QZ*i_|aV*!l~^?YI~Qtg({>KM9No8xN}^N9;g0w2j| z2{)lnf^HHHy1OFMMJgvQ9UqPC%(BgcB=QaG8xl`W+=Y*kznIZ~B<`^F>tbl`?ruEJ zxf5B&2RlE07)bJBGmMm%-A#drd7g8}&CIBr9zWMEu5*f2$NV@X*$ZOuBsx!oV?%@&vJ*uiC_z<5uZtq^sD7XgelW925yH{Y#-uUI@tDp z5O(R;DNe8P7a`>rz|!~Jp(s_$er{C0iPke^=90>p>`oP^Ym2V!0gw#P3)21 zu-r2;h~|Ds&wg#sf~)-}hm#P`XklX;UaJL#SumsSuACb6?|n9jGC1Bg=4)#z8q-J4 z&#RzkV#CjNs`vycfGvilIP{xMyI>*~KLyIe{!CbcL7SW$i4U{0==@gavc0z+)`}sl z2{fwh>K;#UuFZ^dnkA!RQb*~QA08b)2S)Y;6|8P9Cl?!^(>AJ_l~}G@eKx_0taC}@ zPAJx@(sq@{Y(`TvrJ?fi&nG4abc)#l9*Grp(dge`U-!UmY8?OXK>0p8G}OVuRh@^L zI?>bfXsIf+fn!Hw`VPBH+$XNs|2(l+i?1Zm|8@4)x!~JZCT%xl9}2K>zZmKFhaeQ7 z{e#b$A<+gOKdw_#Ryi+su+6BVoKS&%6{UI(woXH*j1s(h>=&zBIq!YWVarFna)nAg ziOc4|T8-7eh0y97xC;xX;){FhM2U=z#Hyr3@%)AZ@PPsV)rKFz!Zil2xVbUxD-K*8 z9O~}rk8~=EC&gZ<$^F*ww0%tD>TcI8eI!Rc$7?rYobIm?uyh$5lxq?ajrG>}MlG$8 zrhwcsLpxF);NfWK7!Kl_nQ@O~bYIR_)2wgG>j%6}TU~qadSD8YxxNpZp68yK97(|8p&;p^8*cc$@4_0G=ZBKY82Ph`W zY3NW0E3xuLQ&sgWWGxU~zV0y-dFo=pDD#MY+y!q~OAL`DiEE zZhxt#Rr3X{gw2zBai9r+j6i_#vB4-{0}Ii9tK${2xemkcSS!8Ib#(>%pp}572hFXb zN8CtBsqh|ZY8Vgy{D>{a=Lt4yZEZXrSJ()`6A}x$8dg!UKls~Uo=kz%H#CTTuI2x^ zQ3tW&X!#tOo$a+|XroKQ5Y<}13XB+-#IIUuY^2kHH+pco(Nj#yUwE>~3;VkVQEAC- z8cXD*LLBHzjWf-4k;=-=-aLTQY5;EHD7;y*w(1r^$mb@o^uiW;A4^Fo3DVa2`A;?k z-LlP;42fo^(gRN@ExAAwsxIqlboe@-F_=U_Z^DtSXE47nv)+M?j}*=7?8(CRepMD3WO#<14-liEZvG z59ht%WZ?Zk5*KIB5_xidFbO+z9JM#%XR9eM={?)6=3@y1m>K8I8w&@=!9es|!POO6 zfH4Mz;?Gs#Dpy-MlLG^h&D+~GHT6Zx)wWHuMULu!qbXqsK1UIadz>FRAo*(fz4I`VNpcyqG^}cv&BK2<5@9#D}N(m zwV-~|SUZViNX$;0+1uXtet8KjYRE=eIW02aZcCzqZv zA2W6PT1mWM%iGa0R+26&;bT)i4xX|yiE(>{_|{*BVnJM&wg*$F{U;tQ0 zQyZU}SJIlAAWr`iRirQ=ORt)m9=NUC1tKw{YHD+ivmfhug$mqnuPD+|b!mLG(zuiD z1?i_uIR{6J+S@UPvAdWuqS`~5^1cT8-RU(8Q^s;MnpiVOi3R#xOoW=QAW@fuBtY2y zaSkzUSW|u&aHcLLIb+^`CiQd}r8f~lSf13Y0Q$h;^0KDF?QQi8++NI4h!)BrVv8G3 zo}2yYO#w_tpmp<|gi8p=wEZJ>rIOQE{|yoJ{q=n(NbbG&%!CKlGxI>hAt0}^6f(29 zNk10HQ{L`|)u>Xa{A2p16GMtaMY+1O-xaykIp@U5i6#d{3TACOl}n6_#-IYCk31@k zicg~k5b&toTlM_<(sqj7uhOV5H%kOSwg<}$Je77Ol|h7k^4EA~lby$ZlPQ+neg4!( zZ4+I!ehiL#DxKrn{&1PFwQ3+!ajfpUp{~A!Z`fx%AgLQc!IVae0K-o2|3;bl$5#H% zUTZ$tqM2`#=&XmW>@0ty+Z77WUo-|XSL*fk4;wcGf&f>vuB`YT%ys^20nqrEiyjAs zGowgc;L6IPiW+Xm=mZ%*|HVcqsr}m?vT;mmDj@YeAjZ=I1O%e)*TR*x&XK_WBTn9h zaK6liehSk?PIs${N95?{^5hiEvJOEwt$*Y&f!ZYe`G=9&l3Yfs)t+n$&tHs7O_wOy zlE3oV1dx|LK5iz~L0_lgy{2YQ{-NRmgI87k7TjCXI7l;L|E#1p3*Or~SYrH~TboMn zKK{U&6_5cjrn|h(8niFMCa$0t*t_VL-x7WX}cB1aCpIylbnQTmcjlfkJjp4w+yw& zNK#V)T{w>1#=1CLk|2nRe*cE<-rg96+BR1Y%_t8{Dz@ByxG{;OiK4FmZq@&(AY!(P=O*$}tU@h%SZPXN$?%cvuc*;W@Np7mdUOsG+km%CL$d(E;*vr!! z{QBkgQArkqxbC$?^^S zt!)4bhSzjL&s7$L_;Hm51Oi%G`XL;7$erm^qjtF1XA-`E6Wc!(ro`WxM{X{cI|0gW zyFJqjcU>Cp{qnde_*MvDgGJ$jCahT0VsO32a{1*nczz zzhLKx8lmR-De{`WGWae@#|2Veq8lwai%V<|vs2JgBT@Pk^2Be=ZW=oByXd^hYp>BS zB{xg>NfLY%pikPFQU!JNKs)BtAvH&|^QQar`}VGph@T35*^!YJqq(w*iTPP)eQYJB&H7O4#4;Q--jH+ikudhkQk;rZ|k8dN-8 zU+U3Xm7tK##z0aNylZl2b8X{OXaTD@w^{Ejis{~I_Gyy?`D{|s_Qq-+-J~Dmr2pxE z+(`+^NwPk6cF2QCeQt?>2s?y)ZJhS*FCoBhcmOfZAa(&n1m`4oOYkdjc;zU3!_Arn z0L#5B!N>uV<_Gb8d1@C|mIxgWQGPPi2hhHqHSf}-w$H4i+%=|*_7#N}6d$4nUoWk; zs}dHm0|eNiZ^s3bYui7f0ygK13C`Su{IzJE9) z;B&y=jmnveAws5Tb0=8xG-mpgj~`}qZY2nA9K4>74X3f0H!P{X+ePoRnf3b~Vb`cAu9Zb0oCOtrVeP>voq zCC5#rr4>E8sXy-W7&PjIMfzkH9!$iWU=H^5%pRIs*|P)S@peX9cLi0Vvl!f7Wks{K z4OKE_1d22pbcR5Uhud;T@=E}X!(o5I?E#0!K6s9y;Q>kjG`!!Ozt8XL8&Jv?eFodjuL@{1WnL6!Yi zcL&78YD-)-p^@*n_%u0Qa+PBwL>MKLCytNdVwlf(B#Hs238xF8ctUqE@`!{AR0Ypk=qU}1Oy9OQ)aW$jBrsE^Bq#fu$>^q1WG8B^HPIMV7;>>% z+dye!3w7N&_S;z`ByrVWRfLxqr7E$Ss4DudUY?fysW4>C2)wD%aqdWei?6Jbyf{-S zqR1Kgnse=-FJ8NB{1Ev~y7qT|m-a1C^Hptc4I=axBx{eQ#5To+K z%X*XtY=Y(0-w~lFI4kjJc_o6@dY2bL80Sz4#XfV=p&yzYm$TobfrkHy@BvnrRNYP9 z^Ik^Lj$US2qN`J$P)R*^nQIJ@6Ec(Us`3IFL-5EP@Ni;0eMIb?L!})3 zdUh)j94{?&-F_&V0v2CE0!ty2M3fA--6!vm24))P7-ci1AW4(_;&y4nf4|x);re1Wi zIZ{(o%W6Br2~=XdTG7g=aERW;#X7XG?U;bj50ihSP1Qt>le-`JdtfD4R(77Aaa0c* z_i#y|A{tW`18-P%r@BLpX?UYr2E@?|0)r#5Z6jH`Z8d;(i$rj6Z>HgqK5FoaHW7g> zqgOg_;1ceome7~7{>+i3Dl%#$rQF8m)!qY1vtP3>tE&YnyuE8`su8u>+2fh1fO*{x zl#9&<2ES}=J=k7^Rv#VRkWqgIvLIii7BJN+t{QtYMjyx{=)O$|RWvu#p|F5L0jK!i zr+9iJ6+?-$axPu0VP2|Z=>&^w{q(RkOV~!G+527T3awW-W`Zp38ITA5L6bMqk8!NX j{{PJJ|LwDXy~mSLIhI`Y1l0n641l0-)Z{8;%tQVMFiJti literal 5011 zcmc(j_gfQNw1$HyT@a8eii!x*r3#1QK@m9uQlxi*&})FuL5eg16&2~7i1ZeEkrt_; zg%&~r5dwtXTf!ahA93$5GxO}3XJ+qNYkl9lcASp3`gJ;PIuHnSUE}3*JrIaO47h$t zL-qHV&RGSVC?I<3s-TJyo;47NRZHXfzi<3AH_-v+Zw|?b-Dw6&hRE>nhwbcJIRF5a|Q6)fgN_4#3b#I44=vAFQN z-6NS;UIs!9H~1Ri_+0UlqQhZj=s0L)M;W_K;PH*m7o@ot^?sGuOsPuaRr#PX>P9-> zFaD@e9$K+`Q7bP!Y41s^N4%oRlV>qkr5XN&V^MWXx|(`J74m=csH0fpxVLv~M*ypu z?s~JZYOF$j98T|Mw9`M(r6-VwTI?d7&^5gSDe&kK>A30hC*5gGX??#LJU2r*>(=aS z*eYS+k>FFg5CvqVMG*EpJ~r85_E#j^ky0rBg*P4DRuHzMsPm9Grj?`p!d(oM>W+Ck z0C!tIdQ6=5T01x?l@L;Z%bR7^PmWJ!kQD@1=oj7ZrUT3EWul-#LEVqCXbHPnonda z<8sdRX3F|%{)bd;+Ui}I^3v|3pl~Mj57sm5sEzmpzJngxV$#}c-}%AI9P;Xoit?go zF*QD`I)~W9`W&5(b3-eq`;B|?@gRvgw2|Ybbq@^>166u+^G`Q$LbR^SG>h+{P&7Zk zw6E7ay8}lm=*ExsmDT0J)?JiQ=6@Q$93^(jD#c%AhkX0CwFL@>Z1L#B-T2my+zu3O zw`--}koCI1$t_1^-8XGjt0em^jdb={<^C0jyBM&zVClD4@hyG^Dh@~4N@dD^48U-? zl9JOxmCaW#ElhRfZP@FSv{dTO$gM3`2D*G$G7~5{kKSI{^$9T-1yPd;?S3iqbA;D&XVo*AcTr zjfccjd3mnVeBAOSCYK()u?wN+{nA zA8J+1HmQ%_7BdI^N2Dbgmf?C1iHh@OTo&mvwh+w^rkC=W-+$vi-uPTw!-?NU;uvqo zws}!@6um;tO`?W0E9}5~b4Q!sd3ZQSD{iL+1Zd9G#kr)Vfkc!%!+WV2KYq+)5A!IHRIj)G7B zT)P&$*UiLsbf^-;_$e*b=$?;ILTljHKV>488w*)|*SV`Ch2nFs-vTw-SAR@Pg-t~b ze1||Zq%*1;YV}`xLInh-vM;%jZRrw4uy zAV9QX9v*&~%39M*${=fUIK})ULF=h(CG(Du3}S=FKJYh<>F7-)JaHE1hL$<6RqXNo zDRquBA5()4I>)SWZQJemXswL!amnXk%RBq`??3S(DTJ6c6o0CfieY8t;@~#54+Dxw zKuSEBiIKNrl)U}><$;1l8>8sxOHVf%y0_LXet+26m|57=uwf+nm^7)iwqSWcRQ0SH z4mv3$_xCu7+sNgBePdS6-=`+EAR0z`N*u}!EhzHH#>!Iy0n@^-PL?n@W3yKaA0!Fz z?~Z>H1wAJpRsw3UMC?xqfbLkwmm6AQ+uKw-$m69P(r=x}Wkkwn&~I_E6&=+pfT)f3^e$H*_LeqgqdwdjE|P~hZfp##eE)9B z_9JU!(?rFcM<K5nk9(T+tx>*L~a)pv>g@6F00QiQngy-G!Voe)2>$@tKn;vZK zk#js9d%(n2|19@5)k)WXGn6fet;N`gRh!DEWe(Yjn*H=GmrQui@T=RdYuM3l|75q$ zY4RoJNVUN|GgCRMKp!UA6a)=-b}>dJTIt>dZ!KJZIuLPfMq7G~b$ zhKyUh$vklex}0t9w~3^4z^IA04gv z!=}$N$MJq6L!eSnWMq@H1LHn5LvC#Q`YO^O~q<@U$UiblK06Qej~}J`*l3 z4InBHgMun%D)Ou4+;Llf-q-}T`Yt^mqUYF)ZIGh{OO-1suFmC0H_XF^>n24 ziy7PXZTnX(8xdE;iea_}H~UV`ZM{7~oxNk9^58`*;o30#NWNNO$3ElAy!rhl{3&9g zZ9Vb*9(3(MA**>3wdSMQfZA79_P!c^T|nE~;HD)JMXW$nt98G3uHrffv|OFKUYft7 zU*v^JCUJ;gk?`mQ)ej>F>E#NT0mC}&?R5^)LR2c)UXZGV=%~dkAIS1YUo5@7k}e0E zappgplR2_z3^&lFDFdfL<@E1_nUg~72qPf#m#-^PL99}eKw|Yx*ewlCz)+A8)EM&# z^7OJoXXB_m2$kX z&A|OU)a!Aj2X=%oHa0X{NIe7-c8s7W$r3q>KCePs8*sQ6*+#_ z2kQN^=7Y1Yy8@<@U5DRL`0=Ah25`!{y`3LB+dvjMm^%utc%PRmnt^^!3Y@{6A`=Su ztmf8V35Q-Vw`s$uT(t(k>h^c)4h6ka)v|U@bST{zt5$ORuUJZb!o~AkuT*HEgF|^jpsBSCs#yPW(bC zj_8ES>>wAr*GT;WpjM*_S(97SZc;xDv$NUeV$M&Q@9GMij`+2bsX$_FAg{UE+qX0f*O!NtLr$zuJnJ!z5>61)1`&>oBq1?0cR$UqkYV^Q9Onrb`9lN2|5c~#nDWQ4=2tfuYV zW(19d4gSU9@h7X`f4kd8DFa&ox`i$q2y#auXHCdr9Vtc8+o(>5ZK&iwsH`zBKO z;^H8Ly(D`jPNsmc^yWXMoj2f2zYxV!te zG%bRq#{*_114XSEzgRBo*VLkfr8@!0k@6!2Y8MsaoFu)(M77!`D0jM-2LTt^t#Z5U zD1=NDulhC%Ay+oy67<6^cL&(Y;=5wCvrb$m1>c{Xy{%~=%%Dm^GTPgNL#t?xaE%N( z%AFUY#mDDj=0A2AkPppl&Y3+td<|1|w$@3*O%S$)%36}{&9C&GHSjBFmZ}stE?z_T zji%^m9u3W&3A>-NQ7$gAmEsx=9uP_SGy%84!YxrVmXyz`&AnX^i{{A_%QkH&7MX5v zr=v2J10;}=vg_k#h-?ziFK{|s2y(5vjSXOCegL+U=)>j^ntkp)=8FUdfP$P}8Gbk3 z@@cs|E{Td0XAn3KT6<` zl2gnC`lP)8A89v5C9cUl%D`HPGSsRyQ>{1=Z#i9Q#@?Cc%S9n9eT4h|Cl zt*YkdJD!uz3%>-tZ9jg-lsCOblbq~uSZxcmKKF1rmk%(quS(sg^ei)8B>InHvc7D% zexRc49z-FXKf70tx}18;<|y`mG$?Jfla(4mCIdXR)42J^%5UfH_7)m3WYOYZKR!%T zkmnN-x;oAeEH5r!uyO9nHb5V-vB^d`S==1l12vJ zR_}N#Q%lQ!j7*aD^u+Bywl$XW69MXjeG^+*aWk~U<6jC2|8&i$>?i+v8gtsfv>)4{ zgtTGB;}Zz=awihE`0?sHOBf&jKN$#9_?rⓈYc1N9UOr{;#_;`uXv+`ou9Y@q&%a zdBl>ET(czJ#bKH$it2xa{Q3pp_20(KA1zy9XD2a*wQ6&bY1J2CXW~)?qztvlq$W zAC=-UEG+)~A|HA_FdPn)Os`4EKdJH@y$hJIxEp3*=8&k-VEp}jQvYdhi%TYHE`c+i@Wy z^L4G44@CvkXx;MdGh{cuv={!-@3|YNP;S%V1JZSDIgSPmm@hlJYvwZ4*|`Sb%M6oDJ$j zN;P2<%!hrq>UIz8?BCohm@da>KnVUn-OSp)ueBB~)`gW7yrXg!f@`}hMq6}mMo-AO?|g*8 z0`>E~!;po=sk!x;;})Fa3%gT|AX{lV|MZO%AyNi4ahHk z+`Q@izYG9eVDr}KB6Us6`)6xX-t!VBz` Date: Wed, 20 Feb 2019 14:27:42 +0100 Subject: [PATCH 6/9] update snapshots due to the latest style refactoring --- .../__snapshots__/Button.test.js.snap | 372 ++++- .../__snapshots__/Dropdown.test.js.snap | 1439 ++++++++++++++++- .../__tests__/__snapshots__/Icon.test.js.snap | 4 + .../__snapshots__/InputMasked.test.js.snap | 1439 ++++++++++++++++- .../__snapshots__/Input.test.js.snap | 1081 ++++++++++++- .../__tests__/__snapshots__/Logo.test.js.snap | 362 ++++- .../__snapshots__/Modal.test.js.snap | 723 ++++++++- .../__snapshots__/Slider.test.js.snap | 362 ++++- .../__snapshots__/StepIndicator.test.js.snap | 362 ++++- .../__snapshots__/Switch.test.js.snap | 362 ++++- .../__tests__/__snapshots__/Tabs.test.js.snap | 362 ++++- .../__snapshots__/ViewTitle.test.js.snap | 362 ++++- 12 files changed, 7118 insertions(+), 112 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap index a7c6cd9708c..a76f87e38e9 100644 --- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -227,7 +227,8 @@ exports[`Button scss have to match default theme snapshot 1`] = ` /* stylelint-disable-line */ } .dnb-button { - border: none; } + border: none; + box-shadow: none; } .dnb-button--secondary:not([disabled]):not(.dnb-button--has-text) .dnb-button__icon { color: var(--color-emerald-green); } @@ -262,7 +263,9 @@ exports[`Button scss have to match default theme snapshot 1`] = ` .dnb-button--secondary { color: var(--color-sea-green); - background-color: var(--color-white); } + background-color: var(--color-white); + box-shadow: inset 0 0 0 1px var(--color-sea-green-alt); + border-color: transparent; } .no-touch .dnb-button--secondary:hover[disabled] { cursor: not-allowed; } .no-touch .dnb-button--secondary:hover:not([disabled]) { @@ -497,6 +500,10 @@ exports[`Button scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * DNB icon * @@ -548,6 +555,182 @@ exports[`Button scss have to match snapshot 1`] = ` height: auto; } .dnb-button { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -559,15 +742,187 @@ exports[`Button scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-button *, .dnb-button ::before, .dnb-button ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-button ::before, + .dnb-button ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-button hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-button main { + display: block; } + .dnb-button nav ol, + .dnb-button nav ul { + list-style: none; } + .dnb-button pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button a { + background-color: transparent; } + .dnb-button abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-button b, + .dnb-button strong { + font-weight: bolder; } + .dnb-button code, + .dnb-button kbd, + .dnb-button samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-button audio, + .dnb-button canvas, + .dnb-button iframe, + .dnb-button img, + .dnb-button svg, + .dnb-button video { + vertical-align: middle; } + .dnb-button audio, + .dnb-button video { + display: inline-block; } + .dnb-button audio:not([controls]) { + display: none; + height: 0; } + .dnb-button img { + border-style: none; } + .dnb-button svg:not([fill]) { + fill: currentColor; } + .dnb-button svg:not(:root) { + overflow: hidden; } + .dnb-button table { + border-collapse: collapse; } + .dnb-button button, + .dnb-button input, + .dnb-button select, + .dnb-button textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-button button, + .dnb-button input, + .dnb-button select { + margin: 0; } + .dnb-button button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-button button, + .dnb-button [type='button'], + .dnb-button [type='reset'], + .dnb-button [type='submit'] { + -webkit-appearance: button; } + .dnb-button fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-button input { + overflow: visible; } + .dnb-button legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-button progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-button select { + text-transform: none; } + .dnb-button textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-button [type='checkbox'], + .dnb-button [type='radio'] { + padding: 0; } + .dnb-button [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-button ::-webkit-inner-spin-button, + .dnb-button ::-webkit-outer-spin-button { + height: auto; } + .dnb-button ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-button ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-button ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-button ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-button :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-button details { + display: block; } + .dnb-button summary { + display: list-item; } + .dnb-button canvas { + display: inline-block; } + .dnb-button template { + display: none; } + .dnb-button a, + .dnb-button area, + .dnb-button button, + .dnb-button input, + .dnb-button label, + .dnb-button select, + .dnb-button summary, + .dnb-button textarea, + .dnb-button [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-button [hidden] { + display: none; } + .dnb-button [aria-busy='true'] { + cursor: progress; } + .dnb-button [aria-controls] { + cursor: pointer; } + .dnb-button [aria-disabled='true'], + .dnb-button [disabled] { + cursor: not-allowed; } + .dnb-button [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-button { + background-color: white; } } .dnb-button button { overflow: visible; text-transform: none; } @@ -720,8 +1075,7 @@ exports[`Button scss have to match snapshot 1`] = ` border: none; } a.dnb-button { - -webkit-appearance: none; - box-shadow: none; } + -webkit-appearance: none; } a.dnb-button .dnb-button__icon { transform: translateY(0); } a.dnb-button .dnb-button__text { diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 647f2b7c040..f1f11e7aa52 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -304,6 +304,10 @@ exports[`Dropdown scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * DNB Input * @@ -363,6 +367,182 @@ exports[`Dropdown scss have to match snapshot 1`] = ` height: auto; } .dnb-button { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -374,15 +554,187 @@ exports[`Dropdown scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-button *, .dnb-button ::before, .dnb-button ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-button ::before, + .dnb-button ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-button hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-button main { + display: block; } + .dnb-button nav ol, + .dnb-button nav ul { + list-style: none; } + .dnb-button pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button a { + background-color: transparent; } + .dnb-button abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-button b, + .dnb-button strong { + font-weight: bolder; } + .dnb-button code, + .dnb-button kbd, + .dnb-button samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-button audio, + .dnb-button canvas, + .dnb-button iframe, + .dnb-button img, + .dnb-button svg, + .dnb-button video { + vertical-align: middle; } + .dnb-button audio, + .dnb-button video { + display: inline-block; } + .dnb-button audio:not([controls]) { + display: none; + height: 0; } + .dnb-button img { + border-style: none; } + .dnb-button svg:not([fill]) { + fill: currentColor; } + .dnb-button svg:not(:root) { + overflow: hidden; } + .dnb-button table { + border-collapse: collapse; } + .dnb-button button, + .dnb-button input, + .dnb-button select, + .dnb-button textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-button button, + .dnb-button input, + .dnb-button select { + margin: 0; } + .dnb-button button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-button button, + .dnb-button [type='button'], + .dnb-button [type='reset'], + .dnb-button [type='submit'] { + -webkit-appearance: button; } + .dnb-button fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-button input { + overflow: visible; } + .dnb-button legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-button progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-button select { + text-transform: none; } + .dnb-button textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-button [type='checkbox'], + .dnb-button [type='radio'] { + padding: 0; } + .dnb-button [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-button ::-webkit-inner-spin-button, + .dnb-button ::-webkit-outer-spin-button { + height: auto; } + .dnb-button ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-button ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-button ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-button ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-button :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-button details { + display: block; } + .dnb-button summary { + display: list-item; } + .dnb-button canvas { + display: inline-block; } + .dnb-button template { + display: none; } + .dnb-button a, + .dnb-button area, + .dnb-button button, + .dnb-button input, + .dnb-button label, + .dnb-button select, + .dnb-button summary, + .dnb-button textarea, + .dnb-button [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-button [hidden] { + display: none; } + .dnb-button [aria-busy='true'] { + cursor: progress; } + .dnb-button [aria-controls] { + cursor: pointer; } + .dnb-button [aria-disabled='true'], + .dnb-button [disabled] { + cursor: not-allowed; } + .dnb-button [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-button { + background-color: white; } } .dnb-button button { overflow: visible; text-transform: none; } @@ -535,8 +887,7 @@ exports[`Dropdown scss have to match snapshot 1`] = ` border: none; } a.dnb-button { - -webkit-appearance: none; - box-shadow: none; } + -webkit-appearance: none; } a.dnb-button .dnb-button__icon { transform: translateY(0); } a.dnb-button .dnb-button__text { @@ -557,6 +908,182 @@ a.dnb-button { * */ .dnb-form-label { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -568,15 +1095,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-form-label ::before, - .dnb-form-label ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-form-label *, .dnb-form-label ::before, .dnb-form-label ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-form-label ::before, + .dnb-form-label ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-form-label hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-form-label main { + display: block; } + .dnb-form-label nav ol, + .dnb-form-label nav ul { + list-style: none; } + .dnb-form-label pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label a { + background-color: transparent; } + .dnb-form-label abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-form-label b, + .dnb-form-label strong { + font-weight: bolder; } + .dnb-form-label code, + .dnb-form-label kbd, + .dnb-form-label samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-form-label audio, + .dnb-form-label canvas, + .dnb-form-label iframe, + .dnb-form-label img, + .dnb-form-label svg, + .dnb-form-label video { + vertical-align: middle; } + .dnb-form-label audio, + .dnb-form-label video { + display: inline-block; } + .dnb-form-label audio:not([controls]) { + display: none; + height: 0; } + .dnb-form-label img { + border-style: none; } + .dnb-form-label svg:not([fill]) { + fill: currentColor; } + .dnb-form-label svg:not(:root) { + overflow: hidden; } + .dnb-form-label table { + border-collapse: collapse; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select, + .dnb-form-label textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select { + margin: 0; } + .dnb-form-label button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-form-label button, + .dnb-form-label [type='button'], + .dnb-form-label [type='reset'], + .dnb-form-label [type='submit'] { + -webkit-appearance: button; } + .dnb-form-label fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-form-label input { + overflow: visible; } + .dnb-form-label legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-form-label progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-form-label select { + text-transform: none; } + .dnb-form-label textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-form-label [type='checkbox'], + .dnb-form-label [type='radio'] { + padding: 0; } + .dnb-form-label [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-form-label ::-webkit-inner-spin-button, + .dnb-form-label ::-webkit-outer-spin-button { + height: auto; } + .dnb-form-label ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-form-label ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-form-label ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-form-label ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-form-label :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-form-label details { + display: block; } + .dnb-form-label summary { + display: list-item; } + .dnb-form-label canvas { + display: inline-block; } + .dnb-form-label template { + display: none; } + .dnb-form-label a, + .dnb-form-label area, + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label label, + .dnb-form-label select, + .dnb-form-label summary, + .dnb-form-label textarea, + .dnb-form-label [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-form-label [hidden] { + display: none; } + .dnb-form-label [aria-busy='true'] { + cursor: progress; } + .dnb-form-label [aria-controls] { + cursor: pointer; } + .dnb-form-label [aria-disabled='true'], + .dnb-form-label [disabled] { + cursor: not-allowed; } + .dnb-form-label [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-form-label { + background-color: white; } } /* * FormLabel element @@ -591,6 +1290,182 @@ a.dnb-button { white-space: nowrap; } .dnb-input { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -602,15 +1477,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-input ::before, - .dnb-input ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-input *, .dnb-input ::before, .dnb-input ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-input ::before, + .dnb-input ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-input hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-input main { + display: block; } + .dnb-input nav ol, + .dnb-input nav ul { + list-style: none; } + .dnb-input pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input a { + background-color: transparent; } + .dnb-input abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-input b, + .dnb-input strong { + font-weight: bolder; } + .dnb-input code, + .dnb-input kbd, + .dnb-input samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-input audio, + .dnb-input canvas, + .dnb-input iframe, + .dnb-input img, + .dnb-input svg, + .dnb-input video { + vertical-align: middle; } + .dnb-input audio, + .dnb-input video { + display: inline-block; } + .dnb-input audio:not([controls]) { + display: none; + height: 0; } + .dnb-input img { + border-style: none; } + .dnb-input svg:not([fill]) { + fill: currentColor; } + .dnb-input svg:not(:root) { + overflow: hidden; } + .dnb-input table { + border-collapse: collapse; } + .dnb-input button, + .dnb-input input, + .dnb-input select, + .dnb-input textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-input button, + .dnb-input input, + .dnb-input select { + margin: 0; } + .dnb-input button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-input button, + .dnb-input [type='button'], + .dnb-input [type='reset'], + .dnb-input [type='submit'] { + -webkit-appearance: button; } + .dnb-input fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-input input { + overflow: visible; } + .dnb-input legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-input progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-input select { + text-transform: none; } + .dnb-input textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-input [type='checkbox'], + .dnb-input [type='radio'] { + padding: 0; } + .dnb-input [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-input ::-webkit-inner-spin-button, + .dnb-input ::-webkit-outer-spin-button { + height: auto; } + .dnb-input ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-input ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-input ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-input ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-input :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-input details { + display: block; } + .dnb-input summary { + display: list-item; } + .dnb-input canvas { + display: inline-block; } + .dnb-input template { + display: none; } + .dnb-input a, + .dnb-input area, + .dnb-input button, + .dnb-input input, + .dnb-input label, + .dnb-input select, + .dnb-input summary, + .dnb-input textarea, + .dnb-input [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-input [hidden] { + display: none; } + .dnb-input [aria-busy='true'] { + cursor: progress; } + .dnb-input [aria-controls] { + cursor: pointer; } + .dnb-input [aria-disabled='true'], + .dnb-input [disabled] { + cursor: not-allowed; } + .dnb-input [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-input { + background-color: white; } } /* * Input component @@ -719,6 +1766,182 @@ a.dnb-button { margin-top: 0.5rem; } .dnb-dropdown { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -730,15 +1953,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-dropdown ::before, - .dnb-dropdown ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-dropdown *, .dnb-dropdown ::before, .dnb-dropdown ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-dropdown ::before, + .dnb-dropdown ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-dropdown hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-dropdown main { + display: block; } + .dnb-dropdown nav ol, + .dnb-dropdown nav ul { + list-style: none; } + .dnb-dropdown pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-dropdown a { + background-color: transparent; } + .dnb-dropdown abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-dropdown b, + .dnb-dropdown strong { + font-weight: bolder; } + .dnb-dropdown code, + .dnb-dropdown kbd, + .dnb-dropdown samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-dropdown ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-dropdown audio, + .dnb-dropdown canvas, + .dnb-dropdown iframe, + .dnb-dropdown img, + .dnb-dropdown svg, + .dnb-dropdown video { + vertical-align: middle; } + .dnb-dropdown audio, + .dnb-dropdown video { + display: inline-block; } + .dnb-dropdown audio:not([controls]) { + display: none; + height: 0; } + .dnb-dropdown img { + border-style: none; } + .dnb-dropdown svg:not([fill]) { + fill: currentColor; } + .dnb-dropdown svg:not(:root) { + overflow: hidden; } + .dnb-dropdown table { + border-collapse: collapse; } + .dnb-dropdown button, + .dnb-dropdown input, + .dnb-dropdown select, + .dnb-dropdown textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-dropdown button, + .dnb-dropdown input, + .dnb-dropdown select { + margin: 0; } + .dnb-dropdown button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-dropdown button, + .dnb-dropdown [type='button'], + .dnb-dropdown [type='reset'], + .dnb-dropdown [type='submit'] { + -webkit-appearance: button; } + .dnb-dropdown fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-dropdown input { + overflow: visible; } + .dnb-dropdown legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-dropdown progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-dropdown select { + text-transform: none; } + .dnb-dropdown textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-dropdown [type='checkbox'], + .dnb-dropdown [type='radio'] { + padding: 0; } + .dnb-dropdown [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-dropdown ::-webkit-inner-spin-button, + .dnb-dropdown ::-webkit-outer-spin-button { + height: auto; } + .dnb-dropdown ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-dropdown ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-dropdown ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-dropdown ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-dropdown :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-dropdown details { + display: block; } + .dnb-dropdown summary { + display: list-item; } + .dnb-dropdown canvas { + display: inline-block; } + .dnb-dropdown template { + display: none; } + .dnb-dropdown a, + .dnb-dropdown area, + .dnb-dropdown button, + .dnb-dropdown input, + .dnb-dropdown label, + .dnb-dropdown select, + .dnb-dropdown summary, + .dnb-dropdown textarea, + .dnb-dropdown [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-dropdown [hidden] { + display: none; } + .dnb-dropdown [aria-busy='true'] { + cursor: progress; } + .dnb-dropdown [aria-controls] { + cursor: pointer; } + .dnb-dropdown [aria-disabled='true'], + .dnb-dropdown [disabled] { + cursor: not-allowed; } + .dnb-dropdown [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-dropdown { + background-color: white; } } /* * Dropdown component diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap index 0826febc281..6cb51fd4fe6 100644 --- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap +++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap @@ -182,6 +182,10 @@ exports[`Icon scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * Icon component * diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index c1b09c019af..16947d07ceb 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -161,6 +161,10 @@ exports[`InputMasked scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * DNB Input * @@ -220,6 +224,182 @@ exports[`InputMasked scss have to match snapshot 1`] = ` height: auto; } .dnb-button { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -231,15 +411,187 @@ exports[`InputMasked scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-button *, .dnb-button ::before, .dnb-button ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-button ::before, + .dnb-button ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-button hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-button main { + display: block; } + .dnb-button nav ol, + .dnb-button nav ul { + list-style: none; } + .dnb-button pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button a { + background-color: transparent; } + .dnb-button abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-button b, + .dnb-button strong { + font-weight: bolder; } + .dnb-button code, + .dnb-button kbd, + .dnb-button samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-button audio, + .dnb-button canvas, + .dnb-button iframe, + .dnb-button img, + .dnb-button svg, + .dnb-button video { + vertical-align: middle; } + .dnb-button audio, + .dnb-button video { + display: inline-block; } + .dnb-button audio:not([controls]) { + display: none; + height: 0; } + .dnb-button img { + border-style: none; } + .dnb-button svg:not([fill]) { + fill: currentColor; } + .dnb-button svg:not(:root) { + overflow: hidden; } + .dnb-button table { + border-collapse: collapse; } + .dnb-button button, + .dnb-button input, + .dnb-button select, + .dnb-button textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-button button, + .dnb-button input, + .dnb-button select { + margin: 0; } + .dnb-button button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-button button, + .dnb-button [type='button'], + .dnb-button [type='reset'], + .dnb-button [type='submit'] { + -webkit-appearance: button; } + .dnb-button fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-button input { + overflow: visible; } + .dnb-button legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-button progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-button select { + text-transform: none; } + .dnb-button textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-button [type='checkbox'], + .dnb-button [type='radio'] { + padding: 0; } + .dnb-button [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-button ::-webkit-inner-spin-button, + .dnb-button ::-webkit-outer-spin-button { + height: auto; } + .dnb-button ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-button ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-button ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-button ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-button :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-button details { + display: block; } + .dnb-button summary { + display: list-item; } + .dnb-button canvas { + display: inline-block; } + .dnb-button template { + display: none; } + .dnb-button a, + .dnb-button area, + .dnb-button button, + .dnb-button input, + .dnb-button label, + .dnb-button select, + .dnb-button summary, + .dnb-button textarea, + .dnb-button [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-button [hidden] { + display: none; } + .dnb-button [aria-busy='true'] { + cursor: progress; } + .dnb-button [aria-controls] { + cursor: pointer; } + .dnb-button [aria-disabled='true'], + .dnb-button [disabled] { + cursor: not-allowed; } + .dnb-button [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-button { + background-color: white; } } .dnb-button button { overflow: visible; text-transform: none; } @@ -392,8 +744,7 @@ exports[`InputMasked scss have to match snapshot 1`] = ` border: none; } a.dnb-button { - -webkit-appearance: none; - box-shadow: none; } + -webkit-appearance: none; } a.dnb-button .dnb-button__icon { transform: translateY(0); } a.dnb-button .dnb-button__text { @@ -414,6 +765,182 @@ a.dnb-button { * */ .dnb-form-label { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -425,15 +952,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-form-label ::before, - .dnb-form-label ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-form-label *, .dnb-form-label ::before, .dnb-form-label ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-form-label ::before, + .dnb-form-label ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-form-label hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-form-label main { + display: block; } + .dnb-form-label nav ol, + .dnb-form-label nav ul { + list-style: none; } + .dnb-form-label pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label a { + background-color: transparent; } + .dnb-form-label abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-form-label b, + .dnb-form-label strong { + font-weight: bolder; } + .dnb-form-label code, + .dnb-form-label kbd, + .dnb-form-label samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-form-label audio, + .dnb-form-label canvas, + .dnb-form-label iframe, + .dnb-form-label img, + .dnb-form-label svg, + .dnb-form-label video { + vertical-align: middle; } + .dnb-form-label audio, + .dnb-form-label video { + display: inline-block; } + .dnb-form-label audio:not([controls]) { + display: none; + height: 0; } + .dnb-form-label img { + border-style: none; } + .dnb-form-label svg:not([fill]) { + fill: currentColor; } + .dnb-form-label svg:not(:root) { + overflow: hidden; } + .dnb-form-label table { + border-collapse: collapse; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select, + .dnb-form-label textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select { + margin: 0; } + .dnb-form-label button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-form-label button, + .dnb-form-label [type='button'], + .dnb-form-label [type='reset'], + .dnb-form-label [type='submit'] { + -webkit-appearance: button; } + .dnb-form-label fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-form-label input { + overflow: visible; } + .dnb-form-label legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-form-label progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-form-label select { + text-transform: none; } + .dnb-form-label textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-form-label [type='checkbox'], + .dnb-form-label [type='radio'] { + padding: 0; } + .dnb-form-label [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-form-label ::-webkit-inner-spin-button, + .dnb-form-label ::-webkit-outer-spin-button { + height: auto; } + .dnb-form-label ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-form-label ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-form-label ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-form-label ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-form-label :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-form-label details { + display: block; } + .dnb-form-label summary { + display: list-item; } + .dnb-form-label canvas { + display: inline-block; } + .dnb-form-label template { + display: none; } + .dnb-form-label a, + .dnb-form-label area, + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label label, + .dnb-form-label select, + .dnb-form-label summary, + .dnb-form-label textarea, + .dnb-form-label [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-form-label [hidden] { + display: none; } + .dnb-form-label [aria-busy='true'] { + cursor: progress; } + .dnb-form-label [aria-controls] { + cursor: pointer; } + .dnb-form-label [aria-disabled='true'], + .dnb-form-label [disabled] { + cursor: not-allowed; } + .dnb-form-label [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-form-label { + background-color: white; } } /* * FormLabel element @@ -448,6 +1147,182 @@ a.dnb-button { white-space: nowrap; } .dnb-input { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -459,15 +1334,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-input ::before, - .dnb-input ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-input *, .dnb-input ::before, .dnb-input ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-input ::before, + .dnb-input ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-input hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-input main { + display: block; } + .dnb-input nav ol, + .dnb-input nav ul { + list-style: none; } + .dnb-input pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input a { + background-color: transparent; } + .dnb-input abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-input b, + .dnb-input strong { + font-weight: bolder; } + .dnb-input code, + .dnb-input kbd, + .dnb-input samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-input audio, + .dnb-input canvas, + .dnb-input iframe, + .dnb-input img, + .dnb-input svg, + .dnb-input video { + vertical-align: middle; } + .dnb-input audio, + .dnb-input video { + display: inline-block; } + .dnb-input audio:not([controls]) { + display: none; + height: 0; } + .dnb-input img { + border-style: none; } + .dnb-input svg:not([fill]) { + fill: currentColor; } + .dnb-input svg:not(:root) { + overflow: hidden; } + .dnb-input table { + border-collapse: collapse; } + .dnb-input button, + .dnb-input input, + .dnb-input select, + .dnb-input textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-input button, + .dnb-input input, + .dnb-input select { + margin: 0; } + .dnb-input button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-input button, + .dnb-input [type='button'], + .dnb-input [type='reset'], + .dnb-input [type='submit'] { + -webkit-appearance: button; } + .dnb-input fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-input input { + overflow: visible; } + .dnb-input legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-input progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-input select { + text-transform: none; } + .dnb-input textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-input [type='checkbox'], + .dnb-input [type='radio'] { + padding: 0; } + .dnb-input [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-input ::-webkit-inner-spin-button, + .dnb-input ::-webkit-outer-spin-button { + height: auto; } + .dnb-input ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-input ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-input ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-input ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-input :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-input details { + display: block; } + .dnb-input summary { + display: list-item; } + .dnb-input canvas { + display: inline-block; } + .dnb-input template { + display: none; } + .dnb-input a, + .dnb-input area, + .dnb-input button, + .dnb-input input, + .dnb-input label, + .dnb-input select, + .dnb-input summary, + .dnb-input textarea, + .dnb-input [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-input [hidden] { + display: none; } + .dnb-input [aria-busy='true'] { + cursor: progress; } + .dnb-input [aria-controls] { + cursor: pointer; } + .dnb-input [aria-disabled='true'], + .dnb-input [disabled] { + cursor: not-allowed; } + .dnb-input [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-input { + background-color: white; } } /* * Input component @@ -576,6 +1623,182 @@ a.dnb-button { margin-top: 0.5rem; } .dnb-input-masked { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -587,15 +1810,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-input-masked ::before, - .dnb-input-masked ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-input-masked *, .dnb-input-masked ::before, .dnb-input-masked ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-input-masked ::before, + .dnb-input-masked ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-input-masked hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-input-masked main { + display: block; } + .dnb-input-masked nav ol, + .dnb-input-masked nav ul { + list-style: none; } + .dnb-input-masked pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input-masked a { + background-color: transparent; } + .dnb-input-masked abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-input-masked b, + .dnb-input-masked strong { + font-weight: bolder; } + .dnb-input-masked code, + .dnb-input-masked kbd, + .dnb-input-masked samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input-masked ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-input-masked audio, + .dnb-input-masked canvas, + .dnb-input-masked iframe, + .dnb-input-masked img, + .dnb-input-masked svg, + .dnb-input-masked video { + vertical-align: middle; } + .dnb-input-masked audio, + .dnb-input-masked video { + display: inline-block; } + .dnb-input-masked audio:not([controls]) { + display: none; + height: 0; } + .dnb-input-masked img { + border-style: none; } + .dnb-input-masked svg:not([fill]) { + fill: currentColor; } + .dnb-input-masked svg:not(:root) { + overflow: hidden; } + .dnb-input-masked table { + border-collapse: collapse; } + .dnb-input-masked button, + .dnb-input-masked input, + .dnb-input-masked select, + .dnb-input-masked textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-input-masked button, + .dnb-input-masked input, + .dnb-input-masked select { + margin: 0; } + .dnb-input-masked button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-input-masked button, + .dnb-input-masked [type='button'], + .dnb-input-masked [type='reset'], + .dnb-input-masked [type='submit'] { + -webkit-appearance: button; } + .dnb-input-masked fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-input-masked input { + overflow: visible; } + .dnb-input-masked legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-input-masked progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-input-masked select { + text-transform: none; } + .dnb-input-masked textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-input-masked [type='checkbox'], + .dnb-input-masked [type='radio'] { + padding: 0; } + .dnb-input-masked [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-input-masked ::-webkit-inner-spin-button, + .dnb-input-masked ::-webkit-outer-spin-button { + height: auto; } + .dnb-input-masked ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-input-masked ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-input-masked ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-input-masked ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-input-masked :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-input-masked details { + display: block; } + .dnb-input-masked summary { + display: list-item; } + .dnb-input-masked canvas { + display: inline-block; } + .dnb-input-masked template { + display: none; } + .dnb-input-masked a, + .dnb-input-masked area, + .dnb-input-masked button, + .dnb-input-masked input, + .dnb-input-masked label, + .dnb-input-masked select, + .dnb-input-masked summary, + .dnb-input-masked textarea, + .dnb-input-masked [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-input-masked [hidden] { + display: none; } + .dnb-input-masked [aria-busy='true'] { + cursor: progress; } + .dnb-input-masked [aria-controls] { + cursor: pointer; } + .dnb-input-masked [aria-disabled='true'], + .dnb-input-masked [disabled] { + cursor: not-allowed; } + .dnb-input-masked [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-input-masked { + background-color: white; } } /* * InputMasked component diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 7c148bad965..6f34f083e9b 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -286,6 +286,10 @@ exports[`Input scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * DNB Button * @@ -341,6 +345,182 @@ exports[`Input scss have to match snapshot 1`] = ` height: auto; } .dnb-button { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -352,15 +532,187 @@ exports[`Input scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-button *, .dnb-button ::before, .dnb-button ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-button ::before, + .dnb-button ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-button hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-button main { + display: block; } + .dnb-button nav ol, + .dnb-button nav ul { + list-style: none; } + .dnb-button pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button a { + background-color: transparent; } + .dnb-button abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-button b, + .dnb-button strong { + font-weight: bolder; } + .dnb-button code, + .dnb-button kbd, + .dnb-button samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-button audio, + .dnb-button canvas, + .dnb-button iframe, + .dnb-button img, + .dnb-button svg, + .dnb-button video { + vertical-align: middle; } + .dnb-button audio, + .dnb-button video { + display: inline-block; } + .dnb-button audio:not([controls]) { + display: none; + height: 0; } + .dnb-button img { + border-style: none; } + .dnb-button svg:not([fill]) { + fill: currentColor; } + .dnb-button svg:not(:root) { + overflow: hidden; } + .dnb-button table { + border-collapse: collapse; } + .dnb-button button, + .dnb-button input, + .dnb-button select, + .dnb-button textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-button button, + .dnb-button input, + .dnb-button select { + margin: 0; } + .dnb-button button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-button button, + .dnb-button [type='button'], + .dnb-button [type='reset'], + .dnb-button [type='submit'] { + -webkit-appearance: button; } + .dnb-button fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-button input { + overflow: visible; } + .dnb-button legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-button progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-button select { + text-transform: none; } + .dnb-button textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-button [type='checkbox'], + .dnb-button [type='radio'] { + padding: 0; } + .dnb-button [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-button ::-webkit-inner-spin-button, + .dnb-button ::-webkit-outer-spin-button { + height: auto; } + .dnb-button ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-button ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-button ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-button ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-button :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-button details { + display: block; } + .dnb-button summary { + display: list-item; } + .dnb-button canvas { + display: inline-block; } + .dnb-button template { + display: none; } + .dnb-button a, + .dnb-button area, + .dnb-button button, + .dnb-button input, + .dnb-button label, + .dnb-button select, + .dnb-button summary, + .dnb-button textarea, + .dnb-button [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-button [hidden] { + display: none; } + .dnb-button [aria-busy='true'] { + cursor: progress; } + .dnb-button [aria-controls] { + cursor: pointer; } + .dnb-button [aria-disabled='true'], + .dnb-button [disabled] { + cursor: not-allowed; } + .dnb-button [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-button { + background-color: white; } } .dnb-button button { overflow: visible; text-transform: none; } @@ -513,8 +865,7 @@ exports[`Input scss have to match snapshot 1`] = ` border: none; } a.dnb-button { - -webkit-appearance: none; - box-shadow: none; } + -webkit-appearance: none; } a.dnb-button .dnb-button__icon { transform: translateY(0); } a.dnb-button .dnb-button__text { @@ -535,6 +886,182 @@ a.dnb-button { * */ .dnb-form-label { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -546,15 +1073,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-form-label ::before, - .dnb-form-label ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-form-label *, .dnb-form-label ::before, .dnb-form-label ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-form-label ::before, + .dnb-form-label ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-form-label hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-form-label main { + display: block; } + .dnb-form-label nav ol, + .dnb-form-label nav ul { + list-style: none; } + .dnb-form-label pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label a { + background-color: transparent; } + .dnb-form-label abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-form-label b, + .dnb-form-label strong { + font-weight: bolder; } + .dnb-form-label code, + .dnb-form-label kbd, + .dnb-form-label samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-form-label ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-form-label audio, + .dnb-form-label canvas, + .dnb-form-label iframe, + .dnb-form-label img, + .dnb-form-label svg, + .dnb-form-label video { + vertical-align: middle; } + .dnb-form-label audio, + .dnb-form-label video { + display: inline-block; } + .dnb-form-label audio:not([controls]) { + display: none; + height: 0; } + .dnb-form-label img { + border-style: none; } + .dnb-form-label svg:not([fill]) { + fill: currentColor; } + .dnb-form-label svg:not(:root) { + overflow: hidden; } + .dnb-form-label table { + border-collapse: collapse; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select, + .dnb-form-label textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label select { + margin: 0; } + .dnb-form-label button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-form-label button, + .dnb-form-label [type='button'], + .dnb-form-label [type='reset'], + .dnb-form-label [type='submit'] { + -webkit-appearance: button; } + .dnb-form-label fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-form-label input { + overflow: visible; } + .dnb-form-label legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-form-label progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-form-label select { + text-transform: none; } + .dnb-form-label textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-form-label [type='checkbox'], + .dnb-form-label [type='radio'] { + padding: 0; } + .dnb-form-label [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-form-label ::-webkit-inner-spin-button, + .dnb-form-label ::-webkit-outer-spin-button { + height: auto; } + .dnb-form-label ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-form-label ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-form-label ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-form-label ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-form-label :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-form-label details { + display: block; } + .dnb-form-label summary { + display: list-item; } + .dnb-form-label canvas { + display: inline-block; } + .dnb-form-label template { + display: none; } + .dnb-form-label a, + .dnb-form-label area, + .dnb-form-label button, + .dnb-form-label input, + .dnb-form-label label, + .dnb-form-label select, + .dnb-form-label summary, + .dnb-form-label textarea, + .dnb-form-label [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-form-label [hidden] { + display: none; } + .dnb-form-label [aria-busy='true'] { + cursor: progress; } + .dnb-form-label [aria-controls] { + cursor: pointer; } + .dnb-form-label [aria-disabled='true'], + .dnb-form-label [disabled] { + cursor: not-allowed; } + .dnb-form-label [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-form-label { + background-color: white; } } /* * FormLabel element @@ -569,6 +1268,182 @@ a.dnb-button { white-space: nowrap; } .dnb-input { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -580,15 +1455,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-input ::before, - .dnb-input ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-input *, .dnb-input ::before, .dnb-input ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-input ::before, + .dnb-input ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-input hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-input main { + display: block; } + .dnb-input nav ol, + .dnb-input nav ul { + list-style: none; } + .dnb-input pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input a { + background-color: transparent; } + .dnb-input abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-input b, + .dnb-input strong { + font-weight: bolder; } + .dnb-input code, + .dnb-input kbd, + .dnb-input samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-input ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-input audio, + .dnb-input canvas, + .dnb-input iframe, + .dnb-input img, + .dnb-input svg, + .dnb-input video { + vertical-align: middle; } + .dnb-input audio, + .dnb-input video { + display: inline-block; } + .dnb-input audio:not([controls]) { + display: none; + height: 0; } + .dnb-input img { + border-style: none; } + .dnb-input svg:not([fill]) { + fill: currentColor; } + .dnb-input svg:not(:root) { + overflow: hidden; } + .dnb-input table { + border-collapse: collapse; } + .dnb-input button, + .dnb-input input, + .dnb-input select, + .dnb-input textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-input button, + .dnb-input input, + .dnb-input select { + margin: 0; } + .dnb-input button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-input button, + .dnb-input [type='button'], + .dnb-input [type='reset'], + .dnb-input [type='submit'] { + -webkit-appearance: button; } + .dnb-input fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-input input { + overflow: visible; } + .dnb-input legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-input progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-input select { + text-transform: none; } + .dnb-input textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-input [type='checkbox'], + .dnb-input [type='radio'] { + padding: 0; } + .dnb-input [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-input ::-webkit-inner-spin-button, + .dnb-input ::-webkit-outer-spin-button { + height: auto; } + .dnb-input ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-input ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-input ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-input ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-input :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-input details { + display: block; } + .dnb-input summary { + display: list-item; } + .dnb-input canvas { + display: inline-block; } + .dnb-input template { + display: none; } + .dnb-input a, + .dnb-input area, + .dnb-input button, + .dnb-input input, + .dnb-input label, + .dnb-input select, + .dnb-input summary, + .dnb-input textarea, + .dnb-input [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-input [hidden] { + display: none; } + .dnb-input [aria-busy='true'] { + cursor: progress; } + .dnb-input [aria-controls] { + cursor: pointer; } + .dnb-input [aria-disabled='true'], + .dnb-input [disabled] { + cursor: not-allowed; } + .dnb-input [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-input { + background-color: white; } } /* * Input component diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap index 31d181d4472..cf95d590323 100644 --- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap +++ b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap @@ -167,7 +167,187 @@ exports[`Logo scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-logo { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -179,15 +359,187 @@ exports[`Logo scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-logo ::before, - .dnb-logo ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-logo *, .dnb-logo ::before, .dnb-logo ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-logo ::before, + .dnb-logo ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-logo hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-logo main { + display: block; } + .dnb-logo nav ol, + .dnb-logo nav ul { + list-style: none; } + .dnb-logo pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-logo a { + background-color: transparent; } + .dnb-logo abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-logo b, + .dnb-logo strong { + font-weight: bolder; } + .dnb-logo code, + .dnb-logo kbd, + .dnb-logo samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-logo ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-logo audio, + .dnb-logo canvas, + .dnb-logo iframe, + .dnb-logo img, + .dnb-logo svg, + .dnb-logo video { + vertical-align: middle; } + .dnb-logo audio, + .dnb-logo video { + display: inline-block; } + .dnb-logo audio:not([controls]) { + display: none; + height: 0; } + .dnb-logo img { + border-style: none; } + .dnb-logo svg:not([fill]) { + fill: currentColor; } + .dnb-logo svg:not(:root) { + overflow: hidden; } + .dnb-logo table { + border-collapse: collapse; } + .dnb-logo button, + .dnb-logo input, + .dnb-logo select, + .dnb-logo textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-logo button, + .dnb-logo input, + .dnb-logo select { + margin: 0; } + .dnb-logo button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-logo button, + .dnb-logo [type='button'], + .dnb-logo [type='reset'], + .dnb-logo [type='submit'] { + -webkit-appearance: button; } + .dnb-logo fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-logo input { + overflow: visible; } + .dnb-logo legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-logo progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-logo select { + text-transform: none; } + .dnb-logo textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-logo [type='checkbox'], + .dnb-logo [type='radio'] { + padding: 0; } + .dnb-logo [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-logo ::-webkit-inner-spin-button, + .dnb-logo ::-webkit-outer-spin-button { + height: auto; } + .dnb-logo ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-logo ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-logo ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-logo ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-logo :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-logo details { + display: block; } + .dnb-logo summary { + display: list-item; } + .dnb-logo canvas { + display: inline-block; } + .dnb-logo template { + display: none; } + .dnb-logo a, + .dnb-logo area, + .dnb-logo button, + .dnb-logo input, + .dnb-logo label, + .dnb-logo select, + .dnb-logo summary, + .dnb-logo textarea, + .dnb-logo [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-logo [hidden] { + display: none; } + .dnb-logo [aria-busy='true'] { + cursor: progress; } + .dnb-logo [aria-controls] { + cursor: pointer; } + .dnb-logo [aria-disabled='true'], + .dnb-logo [disabled] { + cursor: not-allowed; } + .dnb-logo [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-logo { + background-color: white; } } /* * Logo Component diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap index 867b6ab9ad0..2f857f84c85 100644 --- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap +++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap @@ -544,6 +544,10 @@ exports[`Modal scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ /* * DNB Button * @@ -599,6 +603,182 @@ exports[`Modal scss have to match snapshot 1`] = ` height: auto; } .dnb-button { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -610,15 +790,187 @@ exports[`Modal scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-button ::before, - .dnb-button ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-button *, .dnb-button ::before, .dnb-button ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-button ::before, + .dnb-button ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-button hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-button main { + display: block; } + .dnb-button nav ol, + .dnb-button nav ul { + list-style: none; } + .dnb-button pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button a { + background-color: transparent; } + .dnb-button abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-button b, + .dnb-button strong { + font-weight: bolder; } + .dnb-button code, + .dnb-button kbd, + .dnb-button samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-button ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-button audio, + .dnb-button canvas, + .dnb-button iframe, + .dnb-button img, + .dnb-button svg, + .dnb-button video { + vertical-align: middle; } + .dnb-button audio, + .dnb-button video { + display: inline-block; } + .dnb-button audio:not([controls]) { + display: none; + height: 0; } + .dnb-button img { + border-style: none; } + .dnb-button svg:not([fill]) { + fill: currentColor; } + .dnb-button svg:not(:root) { + overflow: hidden; } + .dnb-button table { + border-collapse: collapse; } + .dnb-button button, + .dnb-button input, + .dnb-button select, + .dnb-button textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-button button, + .dnb-button input, + .dnb-button select { + margin: 0; } + .dnb-button button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-button button, + .dnb-button [type='button'], + .dnb-button [type='reset'], + .dnb-button [type='submit'] { + -webkit-appearance: button; } + .dnb-button fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-button input { + overflow: visible; } + .dnb-button legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-button progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-button select { + text-transform: none; } + .dnb-button textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-button [type='checkbox'], + .dnb-button [type='radio'] { + padding: 0; } + .dnb-button [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-button ::-webkit-inner-spin-button, + .dnb-button ::-webkit-outer-spin-button { + height: auto; } + .dnb-button ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-button ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-button ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-button ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-button :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-button details { + display: block; } + .dnb-button summary { + display: list-item; } + .dnb-button canvas { + display: inline-block; } + .dnb-button template { + display: none; } + .dnb-button a, + .dnb-button area, + .dnb-button button, + .dnb-button input, + .dnb-button label, + .dnb-button select, + .dnb-button summary, + .dnb-button textarea, + .dnb-button [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-button [hidden] { + display: none; } + .dnb-button [aria-busy='true'] { + cursor: progress; } + .dnb-button [aria-controls] { + cursor: pointer; } + .dnb-button [aria-disabled='true'], + .dnb-button [disabled] { + cursor: not-allowed; } + .dnb-button [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-button { + background-color: white; } } .dnb-button button { overflow: visible; text-transform: none; } @@ -771,8 +1123,7 @@ exports[`Modal scss have to match snapshot 1`] = ` border: none; } a.dnb-button { - -webkit-appearance: none; - box-shadow: none; } + -webkit-appearance: none; } a.dnb-button .dnb-button__icon { transform: translateY(0); } a.dnb-button .dnb-button__text { @@ -789,6 +1140,182 @@ a.dnb-button { border-radius: var(--button-border-radius); } .dnb-modal { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -800,15 +1327,187 @@ a.dnb-button { font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-modal ::before, - .dnb-modal ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-modal *, .dnb-modal ::before, .dnb-modal ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-modal ::before, + .dnb-modal ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-modal hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-modal main { + display: block; } + .dnb-modal nav ol, + .dnb-modal nav ul { + list-style: none; } + .dnb-modal pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-modal a { + background-color: transparent; } + .dnb-modal abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-modal b, + .dnb-modal strong { + font-weight: bolder; } + .dnb-modal code, + .dnb-modal kbd, + .dnb-modal samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-modal ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-modal audio, + .dnb-modal canvas, + .dnb-modal iframe, + .dnb-modal img, + .dnb-modal svg, + .dnb-modal video { + vertical-align: middle; } + .dnb-modal audio, + .dnb-modal video { + display: inline-block; } + .dnb-modal audio:not([controls]) { + display: none; + height: 0; } + .dnb-modal img { + border-style: none; } + .dnb-modal svg:not([fill]) { + fill: currentColor; } + .dnb-modal svg:not(:root) { + overflow: hidden; } + .dnb-modal table { + border-collapse: collapse; } + .dnb-modal button, + .dnb-modal input, + .dnb-modal select, + .dnb-modal textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-modal button, + .dnb-modal input, + .dnb-modal select { + margin: 0; } + .dnb-modal button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-modal button, + .dnb-modal [type='button'], + .dnb-modal [type='reset'], + .dnb-modal [type='submit'] { + -webkit-appearance: button; } + .dnb-modal fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-modal input { + overflow: visible; } + .dnb-modal legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-modal progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-modal select { + text-transform: none; } + .dnb-modal textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-modal [type='checkbox'], + .dnb-modal [type='radio'] { + padding: 0; } + .dnb-modal [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-modal ::-webkit-inner-spin-button, + .dnb-modal ::-webkit-outer-spin-button { + height: auto; } + .dnb-modal ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-modal ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-modal ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-modal ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-modal :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-modal details { + display: block; } + .dnb-modal summary { + display: list-item; } + .dnb-modal canvas { + display: inline-block; } + .dnb-modal template { + display: none; } + .dnb-modal a, + .dnb-modal area, + .dnb-modal button, + .dnb-modal input, + .dnb-modal label, + .dnb-modal select, + .dnb-modal summary, + .dnb-modal textarea, + .dnb-modal [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-modal [hidden] { + display: none; } + .dnb-modal [aria-busy='true'] { + cursor: progress; } + .dnb-modal [aria-controls] { + cursor: pointer; } + .dnb-modal [aria-disabled='true'], + .dnb-modal [disabled] { + cursor: not-allowed; } + .dnb-modal [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-modal { + background-color: white; } } /* * Modal component diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap index a36ed4948b7..2e19a29ff68 100644 --- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap +++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap @@ -181,7 +181,187 @@ exports[`Slider scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-slider { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -193,15 +373,187 @@ exports[`Slider scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-slider ::before, - .dnb-slider ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-slider *, .dnb-slider ::before, .dnb-slider ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-slider ::before, + .dnb-slider ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-slider hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-slider main { + display: block; } + .dnb-slider nav ol, + .dnb-slider nav ul { + list-style: none; } + .dnb-slider pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-slider a { + background-color: transparent; } + .dnb-slider abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-slider b, + .dnb-slider strong { + font-weight: bolder; } + .dnb-slider code, + .dnb-slider kbd, + .dnb-slider samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-slider ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-slider audio, + .dnb-slider canvas, + .dnb-slider iframe, + .dnb-slider img, + .dnb-slider svg, + .dnb-slider video { + vertical-align: middle; } + .dnb-slider audio, + .dnb-slider video { + display: inline-block; } + .dnb-slider audio:not([controls]) { + display: none; + height: 0; } + .dnb-slider img { + border-style: none; } + .dnb-slider svg:not([fill]) { + fill: currentColor; } + .dnb-slider svg:not(:root) { + overflow: hidden; } + .dnb-slider table { + border-collapse: collapse; } + .dnb-slider button, + .dnb-slider input, + .dnb-slider select, + .dnb-slider textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-slider button, + .dnb-slider input, + .dnb-slider select { + margin: 0; } + .dnb-slider button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-slider button, + .dnb-slider [type='button'], + .dnb-slider [type='reset'], + .dnb-slider [type='submit'] { + -webkit-appearance: button; } + .dnb-slider fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-slider input { + overflow: visible; } + .dnb-slider legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-slider progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-slider select { + text-transform: none; } + .dnb-slider textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-slider [type='checkbox'], + .dnb-slider [type='radio'] { + padding: 0; } + .dnb-slider [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-slider ::-webkit-inner-spin-button, + .dnb-slider ::-webkit-outer-spin-button { + height: auto; } + .dnb-slider ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-slider ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-slider ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-slider ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-slider :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-slider details { + display: block; } + .dnb-slider summary { + display: list-item; } + .dnb-slider canvas { + display: inline-block; } + .dnb-slider template { + display: none; } + .dnb-slider a, + .dnb-slider area, + .dnb-slider button, + .dnb-slider input, + .dnb-slider label, + .dnb-slider select, + .dnb-slider summary, + .dnb-slider textarea, + .dnb-slider [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-slider [hidden] { + display: none; } + .dnb-slider [aria-busy='true'] { + cursor: progress; } + .dnb-slider [aria-controls] { + cursor: pointer; } + .dnb-slider [aria-disabled='true'], + .dnb-slider [disabled] { + cursor: not-allowed; } + .dnb-slider [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-slider { + background-color: white; } } /* * Slider component diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index a14924898a8..84bd2e203f6 100644 --- a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -345,7 +345,187 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-step-indicator { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -357,15 +537,187 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-step-indicator ::before, - .dnb-step-indicator ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-step-indicator *, .dnb-step-indicator ::before, .dnb-step-indicator ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-step-indicator ::before, + .dnb-step-indicator ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-step-indicator hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-step-indicator main { + display: block; } + .dnb-step-indicator nav ol, + .dnb-step-indicator nav ul { + list-style: none; } + .dnb-step-indicator pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-step-indicator a { + background-color: transparent; } + .dnb-step-indicator abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-step-indicator b, + .dnb-step-indicator strong { + font-weight: bolder; } + .dnb-step-indicator code, + .dnb-step-indicator kbd, + .dnb-step-indicator samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-step-indicator ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-step-indicator audio, + .dnb-step-indicator canvas, + .dnb-step-indicator iframe, + .dnb-step-indicator img, + .dnb-step-indicator svg, + .dnb-step-indicator video { + vertical-align: middle; } + .dnb-step-indicator audio, + .dnb-step-indicator video { + display: inline-block; } + .dnb-step-indicator audio:not([controls]) { + display: none; + height: 0; } + .dnb-step-indicator img { + border-style: none; } + .dnb-step-indicator svg:not([fill]) { + fill: currentColor; } + .dnb-step-indicator svg:not(:root) { + overflow: hidden; } + .dnb-step-indicator table { + border-collapse: collapse; } + .dnb-step-indicator button, + .dnb-step-indicator input, + .dnb-step-indicator select, + .dnb-step-indicator textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-step-indicator button, + .dnb-step-indicator input, + .dnb-step-indicator select { + margin: 0; } + .dnb-step-indicator button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-step-indicator button, + .dnb-step-indicator [type='button'], + .dnb-step-indicator [type='reset'], + .dnb-step-indicator [type='submit'] { + -webkit-appearance: button; } + .dnb-step-indicator fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-step-indicator input { + overflow: visible; } + .dnb-step-indicator legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-step-indicator progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-step-indicator select { + text-transform: none; } + .dnb-step-indicator textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-step-indicator [type='checkbox'], + .dnb-step-indicator [type='radio'] { + padding: 0; } + .dnb-step-indicator [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-step-indicator ::-webkit-inner-spin-button, + .dnb-step-indicator ::-webkit-outer-spin-button { + height: auto; } + .dnb-step-indicator ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-step-indicator ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-step-indicator ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-step-indicator ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-step-indicator :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-step-indicator details { + display: block; } + .dnb-step-indicator summary { + display: list-item; } + .dnb-step-indicator canvas { + display: inline-block; } + .dnb-step-indicator template { + display: none; } + .dnb-step-indicator a, + .dnb-step-indicator area, + .dnb-step-indicator button, + .dnb-step-indicator input, + .dnb-step-indicator label, + .dnb-step-indicator select, + .dnb-step-indicator summary, + .dnb-step-indicator textarea, + .dnb-step-indicator [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-step-indicator [hidden] { + display: none; } + .dnb-step-indicator [aria-busy='true'] { + cursor: progress; } + .dnb-step-indicator [aria-controls] { + cursor: pointer; } + .dnb-step-indicator [aria-disabled='true'], + .dnb-step-indicator [disabled] { + cursor: not-allowed; } + .dnb-step-indicator [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-step-indicator { + background-color: white; } } /* * StepIndicator element diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index d67c47a6cab..1aa8d4be0e1 100644 --- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -201,7 +201,187 @@ exports[`Switch scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-switch { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -213,15 +393,187 @@ exports[`Switch scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-switch ::before, - .dnb-switch ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-switch *, .dnb-switch ::before, .dnb-switch ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-switch ::before, + .dnb-switch ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-switch hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-switch main { + display: block; } + .dnb-switch nav ol, + .dnb-switch nav ul { + list-style: none; } + .dnb-switch pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-switch a { + background-color: transparent; } + .dnb-switch abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-switch b, + .dnb-switch strong { + font-weight: bolder; } + .dnb-switch code, + .dnb-switch kbd, + .dnb-switch samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-switch ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-switch audio, + .dnb-switch canvas, + .dnb-switch iframe, + .dnb-switch img, + .dnb-switch svg, + .dnb-switch video { + vertical-align: middle; } + .dnb-switch audio, + .dnb-switch video { + display: inline-block; } + .dnb-switch audio:not([controls]) { + display: none; + height: 0; } + .dnb-switch img { + border-style: none; } + .dnb-switch svg:not([fill]) { + fill: currentColor; } + .dnb-switch svg:not(:root) { + overflow: hidden; } + .dnb-switch table { + border-collapse: collapse; } + .dnb-switch button, + .dnb-switch input, + .dnb-switch select, + .dnb-switch textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-switch button, + .dnb-switch input, + .dnb-switch select { + margin: 0; } + .dnb-switch button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-switch button, + .dnb-switch [type='button'], + .dnb-switch [type='reset'], + .dnb-switch [type='submit'] { + -webkit-appearance: button; } + .dnb-switch fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-switch input { + overflow: visible; } + .dnb-switch legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-switch progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-switch select { + text-transform: none; } + .dnb-switch textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-switch [type='checkbox'], + .dnb-switch [type='radio'] { + padding: 0; } + .dnb-switch [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-switch ::-webkit-inner-spin-button, + .dnb-switch ::-webkit-outer-spin-button { + height: auto; } + .dnb-switch ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-switch ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-switch ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-switch ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-switch :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-switch details { + display: block; } + .dnb-switch summary { + display: list-item; } + .dnb-switch canvas { + display: inline-block; } + .dnb-switch template { + display: none; } + .dnb-switch a, + .dnb-switch area, + .dnb-switch button, + .dnb-switch input, + .dnb-switch label, + .dnb-switch select, + .dnb-switch summary, + .dnb-switch textarea, + .dnb-switch [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-switch [hidden] { + display: none; } + .dnb-switch [aria-busy='true'] { + cursor: progress; } + .dnb-switch [aria-controls] { + cursor: pointer; } + .dnb-switch [aria-disabled='true'], + .dnb-switch [disabled] { + cursor: not-allowed; } + .dnb-switch [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-switch { + background-color: white; } } /* * Switch component diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap index f379e0b31fb..5f0576c8f6d 100644 --- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap +++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap @@ -382,7 +382,187 @@ exports[`Tabs scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-tabs { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -394,15 +574,187 @@ exports[`Tabs scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-tabs ::before, - .dnb-tabs ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-tabs *, .dnb-tabs ::before, .dnb-tabs ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-tabs ::before, + .dnb-tabs ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-tabs hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-tabs main { + display: block; } + .dnb-tabs nav ol, + .dnb-tabs nav ul { + list-style: none; } + .dnb-tabs pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-tabs a { + background-color: transparent; } + .dnb-tabs abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-tabs b, + .dnb-tabs strong { + font-weight: bolder; } + .dnb-tabs code, + .dnb-tabs kbd, + .dnb-tabs samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-tabs ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-tabs audio, + .dnb-tabs canvas, + .dnb-tabs iframe, + .dnb-tabs img, + .dnb-tabs svg, + .dnb-tabs video { + vertical-align: middle; } + .dnb-tabs audio, + .dnb-tabs video { + display: inline-block; } + .dnb-tabs audio:not([controls]) { + display: none; + height: 0; } + .dnb-tabs img { + border-style: none; } + .dnb-tabs svg:not([fill]) { + fill: currentColor; } + .dnb-tabs svg:not(:root) { + overflow: hidden; } + .dnb-tabs table { + border-collapse: collapse; } + .dnb-tabs button, + .dnb-tabs input, + .dnb-tabs select, + .dnb-tabs textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-tabs button, + .dnb-tabs input, + .dnb-tabs select { + margin: 0; } + .dnb-tabs button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-tabs button, + .dnb-tabs [type='button'], + .dnb-tabs [type='reset'], + .dnb-tabs [type='submit'] { + -webkit-appearance: button; } + .dnb-tabs fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-tabs input { + overflow: visible; } + .dnb-tabs legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-tabs progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-tabs select { + text-transform: none; } + .dnb-tabs textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-tabs [type='checkbox'], + .dnb-tabs [type='radio'] { + padding: 0; } + .dnb-tabs [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-tabs ::-webkit-inner-spin-button, + .dnb-tabs ::-webkit-outer-spin-button { + height: auto; } + .dnb-tabs ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-tabs ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-tabs ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-tabs ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-tabs :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-tabs details { + display: block; } + .dnb-tabs summary { + display: list-item; } + .dnb-tabs canvas { + display: inline-block; } + .dnb-tabs template { + display: none; } + .dnb-tabs a, + .dnb-tabs area, + .dnb-tabs button, + .dnb-tabs input, + .dnb-tabs label, + .dnb-tabs select, + .dnb-tabs summary, + .dnb-tabs textarea, + .dnb-tabs [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-tabs [hidden] { + display: none; } + .dnb-tabs [aria-busy='true'] { + cursor: progress; } + .dnb-tabs [aria-controls] { + cursor: pointer; } + .dnb-tabs [aria-disabled='true'], + .dnb-tabs [disabled] { + cursor: not-allowed; } + .dnb-tabs [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-tabs { + background-color: white; } } /* * Tabs component diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap index 17de4e3cc96..54629851a92 100644 --- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap +++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap @@ -135,7 +135,187 @@ exports[`ViewTitle scss have to match snapshot 1`] = ` * Scopes * */ +/* + * Document Reset + * + */ .dnb-view-title { + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + /* Grouping content + */ + /** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + /** + * Add the correct display in IE. + */ + /** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* Text-level semantics + */ + /** + * Remove the gray background on active links in IE 10. + */ + /** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + /** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd \`em\` font sizing in all browsers. + */ + /* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + /* Embedded content + */ + /* + * Change the alignment on media elements in all browers (opinionated). + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in iOS 4-7. + */ + /** + * Remove the border on images inside links in IE 10-. + */ + /** + * Change the fill color to match the text color in all browsers (opinionated). + */ + /** + * Hide the overflow in IE. + */ + /* Tabular data + */ + /** + * Collapse border spacing in all browsers (opinionated). + */ + /* Forms + */ + /** + * Inherit styling in all browsers (opinionated). + */ + /** + * Remove the margin in Safari. + */ + /** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + /** + * Correct the padding in Firefox. + */ + /** + * Show the overflow in Edge and IE. + */ + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from \`fieldset\` elements in IE. + */ + /** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + /** + * Remove the inheritance of text transform in Firefox. + */ + /** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + /** + * Remove the padding in IE 10-. + */ + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + /** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + /** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to \`inherit\` in Safari. + */ + /** + * Remove the inner border and padding of focus outlines in Firefox. + */ + /** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + /* Interactive + */ + /* + * Add the correct display in Edge and IE. + */ + /* + * Add the correct display in all browsers. + */ + /* Scripting + */ + /** + * Add the correct display in IE 9-. + */ + /** + * Add the correct display in IE. + */ + /* User interaction + */ + /* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ + /** + * Add the correct display in IE 10-. + */ + /* Accessibility + */ + /** + * Change the cursor on busy elements in all browsers (opinionated). + */ + /* + * Change the cursor on control elements in all browsers (opinionated). + */ + /* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + /* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ font-family: sans-serif; font-family: var(--font-family-default); font-weight: var(--font-weight-default); @@ -147,15 +327,187 @@ exports[`ViewTitle scss have to match snapshot 1`] = ` font-feature-settings: \\"lnum\\"; font-size: 1em; line-height: 1.5em; } - .dnb-view-title ::before, - .dnb-view-title ::after { - text-decoration: inherit; - vertical-align: inherit; } .dnb-view-title *, .dnb-view-title ::before, .dnb-view-title ::after { background-repeat: no-repeat; - box-sizing: border-box; } + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-view-title ::before, + .dnb-view-title ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + .dnb-view-title hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + .dnb-view-title main { + display: block; } + .dnb-view-title nav ol, + .dnb-view-title nav ul { + list-style: none; } + .dnb-view-title pre { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-view-title a { + background-color: transparent; } + .dnb-view-title abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; } + .dnb-view-title b, + .dnb-view-title strong { + font-weight: bolder; } + .dnb-view-title code, + .dnb-view-title kbd, + .dnb-view-title samp { + font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + .dnb-view-title ::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; } + .dnb-view-title audio, + .dnb-view-title canvas, + .dnb-view-title iframe, + .dnb-view-title img, + .dnb-view-title svg, + .dnb-view-title video { + vertical-align: middle; } + .dnb-view-title audio, + .dnb-view-title video { + display: inline-block; } + .dnb-view-title audio:not([controls]) { + display: none; + height: 0; } + .dnb-view-title img { + border-style: none; } + .dnb-view-title svg:not([fill]) { + fill: currentColor; } + .dnb-view-title svg:not(:root) { + overflow: hidden; } + .dnb-view-title table { + border-collapse: collapse; } + .dnb-view-title button, + .dnb-view-title input, + .dnb-view-title select, + .dnb-view-title textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + .dnb-view-title button, + .dnb-view-title input, + .dnb-view-title select { + margin: 0; } + .dnb-view-title button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ } + .dnb-view-title button, + .dnb-view-title [type='button'], + .dnb-view-title [type='reset'], + .dnb-view-title [type='submit'] { + -webkit-appearance: button; } + .dnb-view-title fieldset { + padding: 0.35rem 0.75rem 0.625rem; } + .dnb-view-title input { + overflow: visible; } + .dnb-view-title legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ } + .dnb-view-title progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + .dnb-view-title select { + text-transform: none; } + .dnb-view-title textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ } + .dnb-view-title [type='checkbox'], + .dnb-view-title [type='radio'] { + padding: 0; } + .dnb-view-title [type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + .dnb-view-title ::-webkit-inner-spin-button, + .dnb-view-title ::-webkit-outer-spin-button { + height: auto; } + .dnb-view-title ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + .dnb-view-title ::-webkit-search-decoration { + -webkit-appearance: none; } + .dnb-view-title ::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + .dnb-view-title ::-moz-focus-inner { + border-style: none; + padding: 0; } + .dnb-view-title :-moz-focusring { + outline: 1px dotted ButtonText; } + .dnb-view-title details { + display: block; } + .dnb-view-title summary { + display: list-item; } + .dnb-view-title canvas { + display: inline-block; } + .dnb-view-title template { + display: none; } + .dnb-view-title a, + .dnb-view-title area, + .dnb-view-title button, + .dnb-view-title input, + .dnb-view-title label, + .dnb-view-title select, + .dnb-view-title summary, + .dnb-view-title textarea, + .dnb-view-title [tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ } + .dnb-view-title [hidden] { + display: none; } + .dnb-view-title [aria-busy='true'] { + cursor: progress; } + .dnb-view-title [aria-controls] { + cursor: pointer; } + .dnb-view-title [aria-disabled='true'], + .dnb-view-title [disabled] { + cursor: not-allowed; } + .dnb-view-title [aria-hidden='false'][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + @media print { + .dnb-view-title { + background-color: white; } } /* * ViewTitle element From 1ef9ea3711c21abfd907c5074cfb5241083060d8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:31:47 +0100 Subject: [PATCH 7/9] fix: borders on #input --- .../button/style/_button-mixins.scss | 21 ++++++++ .../src/components/input/style/_input.scss | 2 +- .../style/themes/dnb-input-theme-ui.scss | 5 +- .../dnb-ui-lib/src/style/core/utilities.scss | 50 ------------------- 4 files changed, 24 insertions(+), 54 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss index 5e2423258a6..73ced64215c 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss @@ -43,3 +43,24 @@ @content; } } + +@mixin drawUnderlineBorder() { + // border + &::after { + content: ''; + position: absolute; + z-index: -1; + + left: 0.05rem; + right: 0.05rem; + bottom: 0; + + width: auto; + height: 1px; + + border-radius: 0.5px; + border-bottom: 1px solid var(--color-sea-green); + + @content; + } +} diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss index 176e3d3c80d..386c361645d 100644 --- a/packages/dnb-ui-lib/src/components/input/style/_input.scss +++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss @@ -162,7 +162,7 @@ } > .dnb-form-status { - margin-top: 0.5rem; + margin-left: 0.5rem; } } diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss index e5167f75beb..3fc0bc55a0b 100644 --- a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss @@ -37,8 +37,7 @@ &[data-input-state='focus'] { background-color: var(--color-white); border-color: var(--input-border-color--active); - @include extendFakeFocus(var(--input-border-color--active)); - @include fakeFocus(); + @include fakeBorder(var(--input-border-color--active), 2px); } } @@ -49,7 +48,7 @@ &, &[data-input-state='focus'] { // In case we want to have a larger border size on the input - @include extendFakeFocus(var(--color-cherry-red)); + @include fakeBorder(var(--color-cherry-red), 2px); } } diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss index d6087d02023..dbff691eddf 100644 --- a/packages/dnb-ui-lib/src/style/core/utilities.scss +++ b/packages/dnb-ui-lib/src/style/core/utilities.scss @@ -148,56 +148,6 @@ $focusRingColor: var(--color-emerald-green); box-shadow: 0 0 0 $width $first-color, $second; } -@mixin _drawUnderline() { - content: ''; - position: absolute; - z-index: -1; - left: 0.1rem; - right: 0.1rem; - - width: auto; - height: 100%; - - @content; -} - -// NB: This one is currently not in use -@mixin drawUnderlineBackground() { - // bg - &::before { - @include _drawUnderline() { - left: 0.1rem; - right: 0.1rem; - bottom: 0; - - max-height: 0%; - transition: max-height 0.1s ease-out; - - // to make the transition show reverse, we have to define the color here - background-color: var(--color-mint-green-50); - - @content; - } - } -} - -@mixin drawUnderlineBorder() { - // border - &::after { - @include _drawUnderline() { - left: 0.05rem; - right: 0.05rem; - bottom: 0; - height: 1px; - } - - border-radius: 0.5px; - border-bottom: 1px solid var(--color-sea-green); - - @content; - } -} - $breakpoints: ( 'small': 40em, 'medium': 50em, From 71875c407ded5f9af9d5c037bd667e4765da82da Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:32:14 +0100 Subject: [PATCH 8/9] refactor #input and #form-status examples --- .../src/components/form-status/Example.js | 37 ++- .../src/components/input/Example.js | 246 ++++++++++-------- 2 files changed, 154 insertions(+), 129 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/form-status/Example.js b/packages/dnb-ui-lib/src/components/form-status/Example.js index 2242491245f..5a36c8e09a7 100644 --- a/packages/dnb-ui-lib/src/components/form-status/Example.js +++ b/packages/dnb-ui-lib/src/components/form-status/Example.js @@ -4,30 +4,29 @@ */ import React, { PureComponent, Fragment } from 'react' -import Input from '../input/Input' +import ComponentBox from '../../../../dnb-design-system-portal/src/shared/tags/ComponentBox' class Example extends PureComponent { - state = { - status: null - } - componentDidMount() { - setTimeout(() => { - this.setState({ - status: 'You have to fill in this field' - }) - }, 400) - } render() { return ( -
- -

A form status

-
+ + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + ) } diff --git a/packages/dnb-ui-lib/src/components/input/Example.js b/packages/dnb-ui-lib/src/components/input/Example.js index fe0a421df36..9a59dbe41d5 100644 --- a/packages/dnb-ui-lib/src/components/input/Example.js +++ b/packages/dnb-ui-lib/src/components/input/Example.js @@ -4,123 +4,149 @@ */ import React, { PureComponent, Fragment } from 'react' -import Input from './Input' -import FormLabel from '../form-label' +import ComponentBox from '../../../../dnb-design-system-portal/src/shared/tags/ComponentBox' import styled from '@emotion/styled' -// The range slider gets imported by the input directly -// import '../slider/style' - class Example extends PureComponent { - state = { - status: null - } - constructor(props) { - super(props) - this._ref = React.createRef() - } - componentDidMount() { - this.setState({ - icon: 'chevron-right' - }) - // use this only in case of using web-components - so the tag should then be insted if - if (this._ref.current.addEvent) { - Input.enableWebComponent() - const cb = e => { - console.log('on_change', e) - } - const eventId = this._ref.current.addEvent('on_change', cb) - - setTimeout(() => { - this._ref.current.fireEvent('on_change', { - value: - 'Hello from an auto fired event with a new value. But the event listener gets removed in 2 seconds.' - }) - setTimeout(() => { - this._ref.current.removeEvent(eventId) - }, 2e3) - }, 2e3) - } - - setTimeout(() => { - this.setState({ - status: 'You have to fill in this field' - }) - }, 400) - } + // TODO: an be deleted in future updates - if not needed + // state = { + // status: null + // } + // constructor(props) { + // super(props) + // this._ref = React.createRef() + // } + // componentDidMount() { + // this.setState({ + // icon: 'chevron-right' + // }) + // // use this only in case of using web-components - so the tag should then be insted if + // if (this._ref.current.addEvent) { + // Input.enableWebComponent() + // const cb = e => { + // console.log('on_change', e) + // } + // const eventId = this._ref.current.addEvent('on_change', cb) + // + // setTimeout(() => { + // this._ref.current.fireEvent('on_change', { + // value: + // 'Hello from an auto fired event with a new value. But the event listener gets removed in 2 seconds.' + // }) + // setTimeout(() => { + // this._ref.current.removeEvent(eventId) + // }, 2e3) + // }, 2e3) + // } + // + // setTimeout(() => { + // this.setState({ + // status: 'You have to fill in this field' + // }) + // }, 400) + // } handleInputChange = ({ value }) => { console.log(value) } render() { + const handleInputChange = this.handleInputChange return ( -
- - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - This is the value 1234567890 - -
+ + {/* @jsx */ ` + + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + This is the value 1234567890 + + `} + ) } @@ -130,8 +156,8 @@ const Wrapper = styled.div` display: block; width: 100%; - .dnb-input { - margin-top: 1rem; + .dnb-input input { + min-width: 10rem; } .dnb-form-label + .dnb-input { margin-top: 0; From e88cfc4b502484d9317f85d7de08ac85f27c5b70 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Feb 2019 14:33:17 +0100 Subject: [PATCH 9/9] update snapshots due to the latest #input style changes --- .../__tests__/__snapshots__/Button.test.js.snap | 5 +---- .../__tests__/__snapshots__/Dropdown.test.js.snap | 2 +- .../__tests__/__snapshots__/InputMasked.test.js.snap | 2 +- .../input/__tests__/__snapshots__/Input.test.js.snap | 11 +++++------ 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap index a76f87e38e9..7c5dcfe4cd7 100644 --- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -310,13 +310,10 @@ exports[`Button scss have to match default theme snapshot 1`] = ` content: ''; position: absolute; z-index: -1; - left: 0.1rem; - right: 0.1rem; - width: auto; - height: 100%; left: 0.05rem; right: 0.05rem; bottom: 0; + width: auto; height: 1px; border-radius: 0.5px; border-bottom: 1px solid var(--color-sea-green); diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index f1f11e7aa52..54d78aee0a4 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -1763,7 +1763,7 @@ a.dnb-button { .dnb-input > .dnb-form-label { margin-right: 1rem; } .dnb-input > .dnb-form-status { - margin-top: 0.5rem; } + margin-left: 0.5rem; } .dnb-dropdown { /** diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 16947d07ceb..470d6dbe587 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -1620,7 +1620,7 @@ a.dnb-button { .dnb-input > .dnb-form-label { margin-right: 1rem; } .dnb-input > .dnb-form-status { - margin-top: 0.5rem; } + margin-left: 0.5rem; } .dnb-input-masked { /** diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 6f34f083e9b..222328c031f 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -144,14 +144,13 @@ exports[`Input scss have to match default theme snapshot 1`] = ` .dnb-input__shell[data-input-state='focus'] { background-color: var(--color-white); border-color: var(--input-border-color--active); - box-shadow: 0 0 0 1px var(--input-border-color--active), 0 0 0 3px; - outline: none; } - html[data-whatinput='keyboard'] .dnb-input__shell[data-input-state='focus'] { - box-shadow: 0 0 0 2px; } + box-shadow: 0 0 0 2px var(--input-border-color--active); + border-color: transparent; } .dnb-input__status--error .dnb-input__shell { border-color: var(--color-cherry-red); } .dnb-input__status--error .dnb-input__shell, .dnb-input__status--error .dnb-input__shell[data-input-state='focus'] { - box-shadow: 0 0 0 1px var(--color-cherry-red), 0 0 0 3px; } + box-shadow: 0 0 0 2px var(--color-cherry-red); + border-color: transparent; } .dnb-input__placeholder { color: var(--color-sea-green); } .dnb-input__shell[data-input-state='focus'][data-has-content='false'] .dnb-input__placeholder { @@ -1741,6 +1740,6 @@ a.dnb-button { .dnb-input > .dnb-form-label { margin-right: 1rem; } .dnb-input > .dnb-form-status { - margin-top: 0.5rem; } + margin-left: 0.5rem; } " `;