feat: add cherry-red to #section + make it possible to stack #secti…

…on in 3 levels
dnbexperience · Aug 14, 2019 · 600c6bc · 600c6bc
1 parent 38b4de2
commit 600c6bc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/packages/dnb-ui-lib/src/components/section/__tests__/__snapshots__/Section.test.js.snap b/packages/dnb-ui-lib/src/components/section/__tests__/__snapshots__/Section.test.js.snap
@@ -35,6 +35,9 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--mint-green-12::after {
   color: var(--color-mint-green-12); }
 
+.dnb-section--mint-green-12 ::selection {
+  background-color: var(--color-white); }
+
 .dnb-section--white::after {
   color: var(--color-white); }
 
@@ -55,6 +58,11 @@ exports[`Section scss have to match default theme snapshot 1`] = `
   color: var(--color-ocean-green); }
   .dnb-section--signal-orange::after {
     color: var(--color-signal-orange); }
+
+.dnb-section--cherry-red {
+  color: var(--color-white); }
+  .dnb-section--cherry-red::after {
+    color: var(--color-cherry-red); }
 "
 `;
 
@@ -122,14 +130,18 @@ exports[`Section scss have to match snapshot 1`] = `
   .dnb-section::after {
     content: '';
     position: absolute;
-    z-index: -1;
+    z-index: -3;
     left: -50vw;
     top: 0;
     width: 100vw;
     height: 100%;
     color: var(--color-mint-green-12);
     background-color: currentColor;
     box-shadow: 100vw 0 0 0 currentColor; }
+  .dnb-section > .dnb-section::after {
+    z-index: -2; }
+  .dnb-section > .dnb-section > .dnb-section::after {
+    z-index: -1; }
   .dnb-section--spacing-small {
     padding-top: var(--spacing-small);
     padding-bottom: var(--spacing-small); }

diff --git a/packages/dnb-ui-lib/src/components/section/style/_section.scss b/packages/dnb-ui-lib/src/components/section/style/_section.scss
@@ -9,7 +9,7 @@
   &::after {
     content: '';
     position: absolute;
-    z-index: -1;
+    z-index: -3;
     left: -50vw;
     top: 0;
     width: 100vw;
@@ -20,6 +20,12 @@
     // we use box-shadow to avoid a horizontal scrollbar
     box-shadow: 100vw 0 0 0 currentColor;
   }
+  & > &::after {
+    z-index: -2;
+  }
+  & > & > &::after {
+    z-index: -1;
+  }
 
   &--spacing-small {
     padding-top: var(--spacing-small);

diff --git a/packages/dnb-ui-lib/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-ui-lib/src/components/section/style/themes/dnb-section-theme-ui.scss
@@ -12,8 +12,13 @@
       0 -0.0625rem 0 0 var(--color-mint-green-50),
       100vw -0.0625rem 0 0 var(--color-mint-green-50);
   }
-  &--mint-green-12::after {
-    color: var(--color-mint-green-12);
+  &--mint-green-12 {
+    &::after {
+      color: var(--color-mint-green-12);
+    }
+    ::selection {
+      background-color: var(--color-white);
+    }
   }
   &--white::after {
     color: var(--color-white);
@@ -41,6 +46,12 @@
       color: var(--color-signal-orange);
     }
   }
+  &--cherry-red {
+    color: var(--color-white);
+    &::after {
+      color: var(--color-cherry-red);
+    }
+  }
 }
 
 .dnb-section {