# All files / src/_styles mixins.ts

100% Statements 18/18
94.11% Branches 16/17
100% Functions 5/5
100% Lines 15/15

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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    6493x
    93x

    93x

    93x

    93x

    93x
    482x

    93x

    93x
    258x

    93x
    466x

    93x
    6x

    88x

     import { css } from 'styled-components'
    import { typographyLineHeight } from '../Typography/Typography.styles'
    import { Intent } from '../Typography/Typography.types'
    import { colors } from './colors'

    export const focusBlue = colors.blue40

    /**
     * Using box-shadow only, will not change size with a border.
     */
    export const focusable = css`
      &.focus,
      &:focus {
        outline: none;
        box-shadow: 0 0 0 1px ${focusBlue}, inset 0 0 0 1px ${focusBlue};
      }
    `

    export function getGapOutlineFocus() {
      return css`
        outline: ${focusBlue} solid 2px;
        outline-offset: 1px;
      `
    }

    export const defaultTransition = css`
      transition: all 0.2s ease-in;
    `

    export function getEllipsis() {
      return css`
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      `
    }

    /**
     * `border` is used instead of `outline` intentionally - as `outline` can't handle `border-radius`
     * (rounded elements will still have square outline)
     */
    export function getFocus() {
      return css`
        border-style: solid;
        border-width: 1px;
        border-color: ${focusBlue};
        box-shadow: 0 0 0 1px ${focusBlue};
        outline: none;
      `
    }

    export function getLineClamp(lines = 2) {
      return css<{ intent?: Intent }>`
        display: -webkit-box;
        -webkit-line-clamp: ${lines};
        -webkit-box-orient: vertical;
        overflow: hidden;
        ${({ intent = 'body' }) => css`
          // limit height for browsers that do not support line-clamp CSS prop
          max-height: ${typographyLineHeight[intent] * 2}px;
        `}
      `
    }