feat: enhance spacing styles, also for nested elements

dnbexperience · Feb 4, 2019 · c7d4775 · c7d4775
1 parent ce8ac41
commit c7d4775
Show file tree

Hide file tree

Showing 49 changed files with 445 additions and 1,248 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/article.md b/packages/dnb-design-system-portal/src/pages/uilib/patterns/article.md
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
@@ -21,7 +21,7 @@ There are several Packages You can use and consume.
 
 All the CSS packages are ready to use, minified CSS files. You will find the main style here, like: `dnb-ui-lib/style/dnb-ui-core.min.css`
 
-Additionally, it is also possible to import a style and theme for every single component separately. You find theme here, like: `dnb-ui-lib/components/[button]/style/dnb-button.min.css`
+Additionally, it is also possible to import a style and theme for every single component separately. You find the styles here, like: `dnb-ui-lib/components/[button]/style/dnb-button.min.css`
 
 The following Diagram gives an overall overview how the packages are structured.
 

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
@@ -27,7 +27,7 @@ import dnbTheme from './themes/dnb-prism-theme'
 const prismStyle = css(dnbTheme)
 
 const Wrapper = styled.div`
-  margin-bottom: 3rem;
+  /* empty */
 `
 
 const CodeBlock = ({

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/InlineCode.js b/packages/dnb-design-system-portal/src/shared/inlineTags/InlineCode.js
@@ -6,10 +6,7 @@
 import styled from '@emotion/styled'
 
 const Code = styled.code`
-  ${'' /* background: blue; */};
-  border-radius: 4px;
-  padding: 4px 6px;
-  font-size: 1em;
+  /* empty */
 `
 
 export default Code
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Pre.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Pre.js
@@ -6,8 +6,7 @@
 import styled from '@emotion/styled'
 
 const Pre = styled.pre`
-  padding: 1rem;
-  border-radius: 8px;
+  /* empty */
 `
 
 export default Pre
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
@@ -4,72 +4,9 @@
  */
 
 import { css } from '@emotion/core'
+import GridStyle from 'dnb-ui-lib/stories/GridStyle'
 
-export const gridStyle = ({
-  rgb = null,
-  hsl = '204, 80%, 72%',
-  a = 0.8
-} = {}) => {
-  const color = c =>
-    rgb ? `rgba(${rgb}, ${a - c})` : `hsla(${hsl}, ${a - c})`
-  return css`
-    position: relative;
-
-    --grid-gutter: 0.5rem;
-    --grid-gutter-bold: 2rem;
-    --grid-color: ${color(0.5)};
-    --grid-color-bold: ${color(0.15)};
-    --grid-line-thickness: 1px;
-
-    --grid-columns: repeating-linear-gradient(
-      to right,
-      var(--grid-color),
-      var(--grid-color) var(--grid-line-thickness),
-      transparent var(--grid-line-thickness),
-      transparent var(--grid-gutter)
-    );
-    --grid-columns-bold: repeating-linear-gradient(
-      to right,
-      var(--grid-color-bold),
-      var(--grid-color-bold) var(--grid-line-thickness),
-      transparent var(--grid-line-thickness),
-      transparent var(--grid-gutter-bold)
-    );
-    --grid-rows: repeating-linear-gradient(
-      to bottom,
-      var(--grid-color),
-      var(--grid-color) var(--grid-line-thickness),
-      transparent var(--grid-line-thickness),
-      transparent var(--grid-gutter)
-    );
-    --grid-rows-bold: repeating-linear-gradient(
-      to bottom,
-      var(--grid-color-bold),
-      var(--grid-color-bold) var(--grid-line-thickness),
-      transparent var(--grid-line-thickness),
-      transparent var(--grid-gutter-bold)
-    );
-
-    &::after {
-      content: '';
-
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-
-      background-image: var(--grid-columns), var(--grid-columns-bold),
-        var(--grid-rows), var(--grid-rows-bold);
-
-      border-bottom: solid var(--grid-line-thickness)
-        var(--grid-color-bold);
-      border-right: solid var(--grid-line-thickness) var(--grid-color-bold);
-    }
-  `
-}
+export const gridStyle = GridStyle
 
 export default css`
   table td.selectable {

diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/demos/Article.js b/packages/dnb-design-system-portal/src/uilib/patterns/demos/Article.js
diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js b/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js
@@ -1,10 +1,9 @@
-/** 
+/**
   ATTENTION: This file is auto generated by using "makeDemosFactory".
   Do not change the content!
      */
 
 import ActionNav from './ActionNav'
-import Article from './Article'
 import DescriptionList from './DescriptionList'
 import FieldsetDescription from './FieldsetDescription'
 import Footer from './Footer'
@@ -19,7 +18,6 @@ import ViewTitle from './ViewTitle'
 
 export default [
   ActionNav,
-  Article,
   DescriptionList,
   FieldsetDescription,
   Footer,