From bff41b6cb9509d2dbaf26b190b6f1190e06857bb Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 28 Jan 2019 11:11:38 +0100 Subject: [PATCH] feat: default style refactoring --- .../src/shared/parts/PortalStyle.js | 8 + .../src/style/themes/dnb-style.scss | 155 +----------------- .../src/style/themes/dnb-theme-ui.scss | 152 +++++++++++++++-- 3 files changed, 151 insertions(+), 164 deletions(-) diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js index 30d9b80ac71..0a1b0d9c6de 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js +++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js @@ -89,6 +89,14 @@ export default css` padding-right: 0.5em; } + img[align='right'] { + padding-left: 1.2rem; + } + + img[align='left'] { + padding-right: 1.2rem; + } + hr { box-sizing: content-box; height: 0; diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-style.scss b/packages/dnb-ui-lib/src/style/themes/dnb-style.scss index 421fad0682e..db18a93f567 100644 --- a/packages/dnb-ui-lib/src/style/themes/dnb-style.scss +++ b/packages/dnb-ui-lib/src/style/themes/dnb-style.scss @@ -26,165 +26,12 @@ } p, - blockquote, ul, ol, dl, + blockquote, pre { margin-top: 0; margin-bottom: 1rem; } - - ul, - ol { - padding-left: 2em; - margin-top: 0; - margin-bottom: 0; - line-height: 1.5rem; - } - - li { - word-wrap: break-all; - } - - ul li, - ol li { - margin-top: 1em; - margin-bottom: 1em; - } - - li > p { - margin-top: 1em; - } - - li + li { - margin-top: 0.25em; - } - - ol ol, - ul ol { - list-style-type: lower-roman; - } - - ul ul, - ul ol, - ol ol, - ol ul { - margin-top: 0; - margin-bottom: 0; - } - - ul ul ol, - ul ol ol, - ol ul ol, - ol ol ol { - list-style-type: lower-alpha; - } - - dd { - margin-left: 0; - } - - dl { - padding: 0; - } - - dl dt { - padding: 0; - margin-top: 1em; - font-size: 1em; - font-style: italic; - font-weight: var(--font-weight-medium); - } - - dl dd { - padding: 0 1em; - margin-bottom: 1em; - } - - blockquote { - padding: 0 1em; - color: var(--color-summer-green); - border-left: 4px dotted var(--color-summer-green); - } - - blockquote > :first-child { - margin-top: 0; - } - - blockquote > :last-child { - margin-bottom: 0; - } - - img { - box-sizing: content-box; - max-width: 100%; - border-style: none; - background-color: #fff; - } - - img[align='right'] { - padding-left: 1.2rem; - } - - img[align='left'] { - padding-right: 1.2rem; - } - - table { - display: block; - width: 100%; - - overflow: auto; - margin-top: 0; - margin-bottom: 1rem; - - border-spacing: 0; - border-collapse: collapse; - } - table th, - table td { - white-space: nowrap; - - // to make sure we have the ability to have a border where ever we want - border-bottom: 1px solid transparent; - - font-size: 1em; - line-height: 1.5em; - } - table th { - padding: 3em 1em 0.5em; - - font-weight: var(--font-weight-medium); - text-align: left; - color: var(--color-emerald-green); - - background-color: var(--color-mint-green-12); - border-bottom: 1px solid var(--color-mint-green); - } - table td { - padding: 1.0625em 1em; - border-bottom: 1px solid transparent; - - line-height: 1.5em; - } - table tr { - background-color: #fff; - } - table tr:nth-child(2n) { - background-color: var(--color-mint-green-12); - } - - code, - * code { - margin: 0; - - font-size: 0.875em; - background-color: var(--color-mint-green-25); - border-radius: 0.1875em; - } - pre, - * pre { - word-wrap: normal; - } } diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss index 3171b54e1a0..cef7fcb7671 100644 --- a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss +++ b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss @@ -54,7 +54,7 @@ h2 { * */ h3, -p.dnb-lead { +.dnb-lead { font-family: var(--font-family-demi); font-weight: var(--font-weight-demi); font-size: var(--font-size-x-default); // 20px @@ -62,8 +62,8 @@ p.dnb-lead { } h3 > small, h3.small, -p.dnb-lead > small, -p.dnb-lead > .small { +.dnb-lead > small, +.dnb-lead > .small { font-size: var(--font-size-default); // 16px line-height: 1.5rem; // 24px } @@ -89,22 +89,154 @@ p { font-size: 1rem; // 16px line-height: 1.5rem; // 24px +} - b, - strong { - font-weight: bold; - } +b, +strong { + font-weight: var(--font-weight-medium); } -label, -input { - font-size: 1rem; // 16px +// Eufemia has currently no italic +// i { +// } + +img { + box-sizing: content-box; + max-width: 100%; + border-style: none; } + +label, +input, form, fieldset { font-size: 1rem; // 16px } +*:not([class^='dnb-']) > { + ul, + ol { + padding-left: 2em; + margin-top: 0; + margin-bottom: 0; + + line-height: 1.5rem; + } + + li { + word-wrap: break-all; + } + + ul li, + ol li { + margin-top: 1em; + margin-bottom: 1em; + } + + li > p { + margin-top: 1em; + } + + li + li { + margin-top: 0.25em; + } + + ul ul, + ul ol, + ol ol, + ol ul { + margin-top: 0; + margin-bottom: 0; + } + + dd { + margin-left: 0; + } + + dl { + padding: 0; + } + + dl dt { + padding: 0; + margin-top: 1em; + } + + dl dd { + padding: 0 1em; + margin-bottom: 1em; + } +} + +table { + display: block; + width: 100%; + + overflow: auto; + margin-top: 0; + margin-bottom: 1rem; + + border-spacing: 0; + border-collapse: collapse; +} +table th, +table td { + // to make sure we have the ability to have a border where ever we want + border-bottom: 1px solid transparent; + + font-size: 1em; + line-height: 1.5em; + border-spacing: 0; + + word-break: keep-all; + text-align: left; +} +table th { + padding: 3em 1em 0.5em; + + font-weight: var(--font-weight-medium); + color: var(--color-emerald-green); + + background-color: var(--color-mint-green-12); + border-bottom: 1px solid var(--color-mint-green); +} +table td { + padding: 1em; + padding-top: 1.25em; + padding-bottom: 1.1875em; +} +table tr { + background-color: #fff; +} +table tr:nth-child(2n) { + background-color: var(--color-mint-green-12); +} + +blockquote { + padding: 0 1em; + color: var(--color-summer-green); + border-left: 4px dotted var(--color-summer-green); +} +blockquote > :first-child { + margin-top: 0; +} +blockquote > :last-child { + margin-bottom: 0; +} + +code, +* code { + margin: 0; + + font-size: 0.875em; + background-color: var(--color-mint-green-25); + border-radius: 0.1875em; +} +pre, +* pre { + word-wrap: normal; +} + ::selection { background: var(--color-mint-green); color: var(--color-black);