# All files / src/CommandButton CommandButton.styled.ts

100% Statements 7/7
87.5% Branches 7/8
100% Functions 4/4
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    3917x

    17x

    22x

    22x

    22x

    17x

    3x

     import { styled, th } from '../styles/styled'
    import * as CSS from 'csstype'

    export const CommandButtonStyled = styled.button<{
      reveal?: boolean
    }>`
      border: none;
      outline: none;
      padding: 10px 22px;
      line-height: 1;
      transition: ${th.transition('button')};
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: inherit;
      background-color: ${({ reveal }): CSS.ColorProperty =>
        reveal ? th.color('standard.light2') : 'transparent'};
      &:hover {
        background-color: ${({ reveal }): CSS.ColorProperty =>
          reveal ? th.color('standard.light1') : th.color('standard.transparent1')};
      }
      &:active {
        color: ${th.color('black.default')};
        background-color: ${({ reveal }): CSS.ColorProperty =>
          reveal ? th.color('standard.dark1') : th.color('standard.transparent2')};
      }
    `

    export const CommandButtonTextStyled = styled.div<{
      hasIcon?: boolean
    }>`
      font-size: 12px;
      margin-top: ${({ hasIcon }): string => (hasIcon ? '6px' : '0')};
      text-overflow: ellipsis;
      overflow: hidden;
    `