fix portal sidebar style changes and also anker style enhancements

dnbexperience · Jan 11, 2019 · 14fecd4 · 14fecd4
1 parent 0f13d28
commit 14fecd4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -69,12 +69,11 @@ const StyledListItem = styled.li`
 
     color: var(--color-sea-green);
 
-    &:active,
     &:hover {
       color: var(--color-ocean-green);
     }
     &:active {
-      opacity: 0.7;
+      color: var(--color-white);
     }
 
     display: flex;
@@ -413,7 +412,7 @@ class ListItem extends PureComponent {
           '--delay': `${nr !== null ? nr * 12 : random(1, 160)}ms`
         }}
       >
-        <Link to={to} className="no-underline no-underline-hover">
+        <Link to={to} className="no-underline no-hover">
           {children}
           {status && (
             <span

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -176,7 +176,7 @@ export default class Button extends PureComponent {
       id,
       class_name,
       className,
-      href ? 'no-underline no-underline-hover' : null
+      href ? 'no-underline no-hover' : null
     )
 
     const params = {

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
@@ -98,7 +98,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   variant="primary"
 >
   <a
-    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className no-underline no-underline-hover"
+    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className no-underline no-hover"
     href="https://url"
     id="id"
     onClick={[Function]}

diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
@@ -20,8 +20,24 @@ body {
 
 // Anker
 a {
-  padding: 0.3125em 0.3125em 0.125em;
-  margin: -0.3125em -0.3125em -0.125em;
+  // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
+  display: inline;
+
+  // top has 1px less, cause we now has 2px on border bottom hover
+  // the calculations are based on 24px line-height
+
+  // 1px = 0,0625
+  // 2px = 0,125
+  // 4px = 0,25
+
+  // on padding-top we have 4px
+  // on padding-bottom we have 2px, cause run a border-bottom with 2px
+  // this makes a total of 8px
+  // 24px line-height - 8px = 16px (font-size)
+  padding: 0.25em 0.125em 0.125em;
+
+  // margins are not needed as long as we go for "inline"
+  // margin: -0.25em 0 -0.125em;
 
   color: inherit;
   color: var(--color-sea-green, inherit);
@@ -32,6 +48,9 @@ a {
   &:hover {
     background-color: var(--color-mint-green-50);
     border-bottom-width: 2px;
+
+    // margins are not needed as long as we go for "inline"
+    // margin-bottom: -0.1875em;
   }
   &:active {
     color: #fff;
@@ -44,13 +63,14 @@ a {
     border-bottom: none;
   }
 
+  transition: background-color 0.2s ease;
+
+  // other stuff, not related to the Anker directly
   .dnb-icon {
     display: inline-block;
     // -1px to center the icons agains large Chars
     transform: translateY(-1px);
   }
-
-  transition: background-color 0.2s ease;
 }
 a.with-animation {
   position: relative; // because of z-index and underline/hover sudo classes
@@ -106,6 +126,7 @@ a.no-dnb-style {
   padding: 0;
   margin: 0;
   white-space: normal;
+  border-bottom: none;
 
   &:active,
   &:hover {
@@ -120,19 +141,20 @@ a.no-dnb-style {
   }
 }
 a.no-underline {
-  // underline
+  border-bottom: none;
+  // border
   &::after {
     border-bottom-color: transparent;
     content: none;
   }
 }
-a.no-underline-hover {
+a.no-hover {
   // bg
   &::before {
     content: none;
   }
 }
-a.no-underline-hover-animation {
+a.no-hover-animation {
   // bg
   &::before {
     transition: max-height 0.01s linear;

diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss
@@ -120,8 +120,8 @@
   // border
   &::after {
     @include _drawUnderline() {
-      left: 0.25em;
-      right: 0.25em;
+      left: 0.05em;
+      right: 0.05em;
       bottom: 0;
       height: 1px;
     }

diff --git a/packages/dnb-ui-lib/stories/componentExamples.js b/packages/dnb-ui-lib/stories/componentExamples.js
@@ -58,11 +58,6 @@ stories.push([
           Anker <Icon icon="chevron_right" />
         </a>
       </Box>
-      <Box>
-        <a href="http://dnb.no" className="with-animation">
-          Anker with Animation <Icon icon="chevron_right" />
-        </a>
-      </Box>
       <Box>
         <a href="http://dnb.no">
           Default Anker - Adipiscing per egestas duis feugiat dignissim
@@ -71,6 +66,11 @@ stories.push([
           natoque varius eros litora
         </a>
       </Box>
+      <Box>
+        <a href="http://dnb.no" className="with-animation">
+          Anker with Animation <Icon icon="chevron_right" />
+        </a>
+      </Box>
       <Box>
         <a href="http://dnb.no" className="with-animation">
           Anker with Animation - Adipiscing per egestas duis feugiat