@hbsis.uikit/react/src/components/checkbox/styled-checkbox.js

Biblioteca ReactJS

import styled from 'styled-components'

const Check = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEzIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBza2V0Y2h0b29sIDQ1LjIgKDQzNTE0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+QkExRjM5NkItNUUzQy00QzUyLTgxODQtNjMwNUVCNjA4NjRGPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+DQogICAgPGRlZnM+DQogICAgICAgIDxwYXRoIGQ9Ik0zLjQzODc1LDkuNTYxIEwwLjQzODc1LDYuNTYxIEMtMC4xNDYyNSw1Ljk3NSAtMC4xNDYyNSw1LjAyNSAwLjQzODc1LDQuNDM5IEMxLjAyNDc1LDMuODU0IDEuOTc0NzUsMy44NTQgMi41NjA3NSw0LjQzOSBMNC40OTk3NSw2LjM3OSBMMTAuNDM4NzUsMC40MzkgQzExLjAyNDc1LC0wLjE0NiAxMS45NzQ3NSwtMC4xNDYgMTIuNTYwNzUsMC40MzkgQzEzLjE0NTc1LDEuMDI1IDEzLjE0NTc1LDEuOTc1IDEyLjU2MDc1LDIuNTYxIEw1LjU2MDc1LDkuNTYxIEM1LjI2Nzc1LDkuODU0IDQuODgzNzUsMTAgNC40OTk3NSwxMCBDNC4xMTU3NSwxMCAzLjczMTc1LDkuODU0IDMuNDM4NzUsOS41NjEgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPg0KICAgIDwvZGVmcz4NCiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJjaGVja2JveC1jaGVjayI+DQogICAgICAgICAgICA8ZyBpZD0iQ2hlY2siPg0KICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iI0FGQ0VGMyIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM2MTk3QzYiIHN0cm9rZS13aWR0aD0iMSIgZD0iTTMuNzkyMzAzMzksOS4yMDc0NDY2MSBDMy45ODI1NDc1OCw5LjM5NzY5MDggNC4yMzUyNjAwNSw5LjUgNC40OTk3NSw5LjUgQzQuNzY0MjM5OTUsOS41IDUuMDE2OTUyNDIsOS4zOTc2OTA4IDUuMjA3MTk2NjEsOS4yMDc0NDY2MSBMMTIuMjA2ODk0OCwyLjIwNzc0ODY2IEMxMi41OTcwMzUxLDEuODE2OTQxNTEgMTIuNTk3MDM1MSwxLjE4MzA1ODQ5IDEyLjIwNzQ5ODcsMC43OTI4NTUxODYgQzExLjgxNjY5MTUsMC40MDI3MTQ5MzggMTEuMTgyODA4NSwwLjQwMjcxNDkzOCAxMC43OTIzMzMyLDAuNzkyNTIzNjI2IEw0LjQ5OTY4ODYxLDcuMDg2MjI3NzIgTDQuMTQ2MTA1NDgsNi43MzI0NjIyMyBMMi4yMDc0OTg2Niw0Ljc5Mjg1NTE5IEMxLjgxNjY5MTUxLDQuNDAyNzE0OTQgMS4xODI4MDg0OSw0LjQwMjcxNDk0IDAuNzkyNjA1MTg2LDQuNzkyMjUxMzQgQzAuNDAyNDY0OTM4LDUuMTgzMDU4NDkgMC40MDI0NjQ5MzgsNS44MTY5NDE1MSAwLjc5MjMwMzM5MSw2LjIwNzQ0NjYxIEwzLjc5MjMwMzM5LDkuMjA3NDQ2NjEgWiI+PC9wYXRoPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+'

const StyledCheckbox = styled.div`
  .Input-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 7px;
    text-transform: uppercase;
    color: #3b495e;
    margin-top: 5px;
  }

  .checkbox-items-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .checkbox-item {
      flex: 0 0 auto;
      height:20px;
      margin-bottom:${p=>p.clearable?'0px':'20px'};
      input[type="checkbox"] {
        display: none;

        &:checked {
          & + label {
            &:before {
              box-shadow: inset 0 0 0 1px #afcef3;
              background: url(${Check}) center no-repeat;
            }
          }
        }

        &:disabled {
          & + label {
            cursor: not-allowed;
            opacity: .5;

            &:before {
              box-shadow: none;
              background-color: #e5edf4;
            }
          }
        }

        &:focus {
          & + label {
            &:before {
              border:1px solid #20cbd3;
              box-shadow: 0 0 0 1px #20cbd3;
            }
          }
        }

        & + label {
          display: block;
          float:left;
          cursor: pointer;
          line-height:21px;
          font-size: 14px;
          height:20px;
          color: #3b495e;

          &:before {
            content: '';
            display: block;
            float:left;
            width: 20px;
            height: 20px;
            margin-right: 9px;
            border-radius: 2px;
            box-shadow: inset 0 0 0 1px #c5d0e1;
          }
        }
      }
    }
  }
`

export default StyledCheckbox