feat: update and refactoring styles

dnbexperience · Nov 20, 2018 · e52ea2e · e52ea2e
1 parent 0f8da34
commit e52ea2e
Show file tree

Hide file tree

Showing 23 changed files with 357 additions and 1,391 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -107,7 +107,13 @@ export default class Card extends Component {
     const { url, customStyle, title, icon: Svg, onClick } = this.props
     return (
       <Link
-        css={cx(boxStyle, customStyle)}
+        className={cx(
+          // 'remove-anker-style',
+          'no-underline',
+          'no-underline-hover',
+          boxStyle,
+          customStyle
+        )}
         style={{ '--delay': `${random(1, 160)}ms` }}
         to={url}
         onClick={onClick}

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -8,7 +8,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import Link from '../parts/Link'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled, { injectGlobal, cx, css } from 'react-emotion'
+import styled, { injectGlobal, cx } from 'react-emotion'
 
 const showAlwaysMenuItems = [] // like "uilib" som someting like that
 
@@ -141,30 +141,41 @@ class ListItem extends React.Component {
   render() {
     const { className, to, children } = this.props
     return (
-      <li className={cx(className, listItemStyle)} ref={this.ref}>
-        <Link to={to}>{children}</Link>
-      </li>
+      <StyledListItem className={className} innerRef={this.ref}>
+        <Link to={to} className="no-underline no-underline-hover">
+          {children}
+        </Link>
+      </StyledListItem>
     )
   }
 }
 
-const listItemStyle = css`
+const StyledListItem = styled.li`
   list-style: none;
 
   a {
     position: relative;
     padding: 0.45em 0 0.45em;
-    display: block;
 
     text-decoration: none;
 
-    /* border-bottom-color: transparent; */
-    border-bottom: none;
-    font-weight: 300;
+    color: var(--color-sea-green);
 
+    &:active,
     &:hover {
       color: var(--color-ocean-green);
-      border-bottom: none;
+    }
+    &:active {
+      opacity: 0.7;
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &::before {
+      /* Change Anker Style */
+      bottom: auto;
     }
 
     /* external link icon */
@@ -205,25 +216,24 @@ const listItemStyle = css`
   &.active a {
     color: var(--color-ocean-green);
 
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    &::before {
+    &::after {
       content: '';
       position: absolute;
 
-      /* left: 1em; */
       display: flex;
 
-      /* padding: .2em; */
       height: 60%;
       width: 4px;
-      margin-top: -2px;
+      max-height: auto;
 
       /* border-radius: 50%; */
       background: var(--color-ocean-green);
-      transform: translateX(-0.6em);
+      transform: translate(-0.6em, -2px);
+
+      /* Reset Anker Style */
+      left: auto;
+      right: auto;
+      bottom: auto;
     }
   }
 `

diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -138,7 +138,6 @@ injectGlobal`
     background-repeat: repeat;
     background-attachment: fixed;
     background-color: transparent;
-    ${'' /* background-image: url('/assets/images/grid-32x32.svg'); */}
     background-image: url(${gridSvg});
 
     h1,
@@ -158,7 +157,19 @@ injectGlobal`
       display: block;
     }
 
+    .dnb-style {
+      .text-lead-16 {
+        border-bottom: solid 1rem green;
+      }
+      .text-lead-20 {
+        border-bottom: solid 1rem green;
+      }
+      .text-small {
+        border-bottom: solid 1rem hotpink;
+      }
+    }
   }
+
   .grid-not-fixed {
     background-attachment: local;
   }

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -175,10 +175,10 @@ const FooterWrapper = styled.footer`
 `
 const Footer = () => (
   <FooterWrapper>
-    <Link to="/license" className="no-unerline">
+    <Link to="/license" className="no-underline">
       Copyright (c) 2018-present DNB.no
     </Link>
-    <Link to="/log" className="no-unerline">
+    <Link to="/log" className="no-underline">
       {buildVersion}
     </Link>
   </FooterWrapper>

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -162,7 +162,8 @@ export default class Button extends PureComponent {
       icon ? 'dnb-button--has-icon' : null,
       id,
       class_name,
-      className
+      className,
+      this.props.href ? 'no-underline no-underline-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
@@ -142,7 +142,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"
+    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"
     href="https://url"
     id="id"
     onClick={[Function]}
@@ -264,108 +264,6 @@ exports[`Button scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */

diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -50,6 +50,7 @@
 
 .dnb-button--tertiary {
   position: relative;
+  z-index: 1;
   color: var(--color-sea-green);
   background-color: transparent;
   border-color: transparent;
@@ -69,15 +70,10 @@
   }
 
   &:not([disabled]):hover {
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0.5em;
+    @include drawUnderlineLine() {
       left: 0.45em;
       right: 0.45em;
-      width: auto;
-      height: 1px; // can also be 0, but for older browsers, we set 1px
-      border-bottom: 1px solid var(--color-emerald-green);
+      bottom: 0.5em;
     }
     &.dnb-button--icon-position-left::after {
       left: 0.7em;