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 16b9e142b80..48461665a8e 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 @@ -646,7 +646,7 @@ a.dnb-button { flex: 1 100%; padding: 0.5em 1.5em; color: var(--color-black); - font-size: 0.75em; + font-size: var(--font-size-small); line-height: 1.25rem; } > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } 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 9c255f09591..2279448cfc1 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 @@ -503,7 +503,7 @@ a.dnb-button { flex: 1 100%; padding: 0.5em 1.5em; color: var(--color-black); - font-size: 0.75em; + font-size: var(--font-size-small); line-height: 1.25rem; } > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } 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 b4c86a8b075..3f8d381af97 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 @@ -688,7 +688,7 @@ a.dnb-button { flex: 1 100%; padding: 0.5em 1.5em; color: var(--color-black); - font-size: 0.75em; + font-size: var(--font-size-small); line-height: 1.25rem; } > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } 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 b87ce138fbd..e0de6b73489 100644 --- a/packages/dnb-ui-lib/src/components/input/style/_input.scss +++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss @@ -143,7 +143,7 @@ padding: 0.5em 1.5em; color: var(--color-black); - font-size: 0.75em; // 12px + font-size: var(--font-size-small); // 14px line-height: 1.25rem; } > .dnb-form-label ~ &__extra-information { diff --git a/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss b/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss index 226cd110852..eb56682e7cc 100644 --- a/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss +++ b/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss @@ -18,27 +18,30 @@ $large-right-padding: (100 - $large-title-width); } &__title { - font-size: 1.5rem; - line-height: 2rem; + display: inline; position: relative; z-index: 1; - display: inline; + + font-size: var(--font-size-medium); + line-height: 2rem; } &__mask { position: absolute; - background-color: white; // so we overlay the line - width: calc(100% + 1rem); - height: calc(100% + 1rem); + z-index: 1; top: -0.5rem; left: -0.5rem; - z-index: 1; + + width: calc(100% + 1rem); + height: calc(100% + 1rem); + + background-color: white; // so we overlay the line } &__text { + display: inline; position: relative; z-index: 2; - display: inline; } &--small { @@ -49,10 +52,12 @@ $large-right-padding: (100 - $large-title-width); } .dnb-line-title__line { - width: 100%; - height: 1px; - background: var(--color-summer-green); position: absolute; top: 50%; left: 0; + + width: 100%; + height: 1px; + + background: var(--color-summer-green); } 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 d22eca1d351..c16be10953b 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 @@ -238,8 +238,7 @@ exports[`Tabs scss have to match default theme snapshot 1`] = ` .dnb-tabs__tabs .dnb-tablink-title { font-weight: var(--font-weight-book); - font-size: 1em; - line-height: 1.5em; + font-size: var(--font-size-default); text-align: center; color: var(--color-emerald-green); } @@ -460,8 +459,7 @@ exports[`Tabs scss have to match snapshot 1`] = ` outline: none; border: none; } .dnb-tabs__tabs .dnb-tablink-title { - font-size: 1em; - line-height: 1.5em; + font-size: var(--font-size-default); white-space: nowrap; } .dnb-tabs__tabs .dnb-tablink > span[hidden] { display: flex; diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss index 5ae39aa4c95..f3b9eee08b1 100644 --- a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss +++ b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss @@ -7,8 +7,6 @@ &__tabs { position: relative; z-index: 1; - // z-index: 100; /* some components have set a position, like MainMenu */ - // overflow: hidden; display: flex; flex-direction: row; @@ -34,6 +32,7 @@ // we may wrap this &::after in allAbove to now show for mobile // @include allAbove(medium) {} + &::after { content: ''; position: absolute; @@ -61,8 +60,7 @@ // should be same as .lead small &-title { - font-size: 1em; - line-height: 1.5em; + font-size: var(--font-size-default); white-space: nowrap; } diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss index 197d8ccab0b..0293d9104c6 100644 --- a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss @@ -15,8 +15,7 @@ // should be same as .lead small &-title { font-weight: var(--font-weight-book); - font-size: 1em; - line-height: 1.5em; + font-size: var(--font-size-default); text-align: center; color: var(--color-emerald-green);