@hbsis.uikit/react/src/components/steps/styledSteps.js

Biblioteca ReactJS

import styled from 'styled-components'

const StyledSteps = styled.div `
 * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Roboto';
  background: #eee;
  margin: 0;
  padding: 0;
}

> .steps {
  background: #f5f6fa;
  
  > .steps__labels {
    margin: 0;
    padding: 0;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    
    > li {
      display: inline-block;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:not(:last-child)::after {
        content: '';
        width: 124px;
        height: 2px;
        background: #c5d0e1;
        margin: 0;
      }
      
      &:last-child {
        margin-right: 0;
      }
      
      > a {
        width: 36px;        
        height: 80px;
        position: relative;
        align-items: center;
        color: #2870b2;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        ${props => props.blockedSteps === true && `
          cursor: default;
        `}
        
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-flow: column-nowrap;
        
        & > .numberTab {
          width: 30px;
          height: 30px;
          color: #95a3b7;
          border: 2px solid #c5d0e1;
          
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        & > .labelTab {
          color: #95a3b7;
          margin-top: 6px;
          position: absolute;
          text-align: center;
          width: max-content;
          top: 55px;
        }
      }
      
      &.active {    
        & > a {
          .numberTab {
            background: #e7f0f7;
            border: 1px solid #6197c6;
            color: #3b495e;
          }
          
          .labelTab {
            color: #3b495e;
          }
        }
      }
      
      &.completed:not(.active) {  
        & > a {
          .numberTab {
            background: #e7f0f7;
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTMgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA0NS4yICg0MzUxNCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+OEIwREU5QjYtNjREMy00NEVELUEwNTktNjYzMDUzM0QyOUU4PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNuLXdpenphcmQtY2hlY2siIGZpbGw9IiMyODcwQjIiPgogICAgICAgICAgICA8cGF0aCBkPSJNMy40Mzg3NSw5LjU2MDc1IEwwLjQzODc1LDYuNTYwNzUgQy0wLjE0NjI1LDUuOTc0NzUgLTAuMTQ2MjUsNS4wMjQ3NSAwLjQzODc1LDQuNDM4NzUgQzEuMDI0NzUsMy44NTM3NSAxLjk3NDc1LDMuODUzNzUgMi41NjA3NSw0LjQzODc1IEw0LjQ5OTc1LDYuMzc4NzUgTDEwLjQzODc1LDAuNDM4NzUgQzExLjAyNDc1LC0wLjE0NjI1IDExLjk3NDc1LC0wLjE0NjI1IDEyLjU2MDc1LDAuNDM4NzUgQzEzLjE0NTc1LDEuMDI0NzUgMTMuMTQ1NzUsMS45NzQ3NSAxMi41NjA3NSwyLjU2MDc1IEw1LjU2MDc1LDkuNTYwNzUgQzUuMjY3NzUsOS44NTM3NSA0Ljg4Mzc1LDkuOTk5NzUgNC40OTk3NSw5Ljk5OTc1IEM0LjExNTc1LDkuOTk5NzUgMy43MzE3NSw5Ljg1Mzc1IDMuNDM4NzUsOS41NjA3NSBaIiBpZD0iQ2hlY2siPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
            border: 1px solid #6197c6;
            color: #3b495e;
            background-repeat: no-repeat;
            background-position: center center;
            color: transparent;
          }
        }
        
        &:not(:last-child)::after {
          content: '';
          width: 124px;
          height: 2px;
          background: #6197c6;
          margin: 0;
        }
      }
    }
  }
}
`

export default StyledSteps