# All files / components/Callout/styles CalloutContainer.js

0% Statements 0/10
0% Branches 0/6
0% Functions 0/2
0% Lines 0/5

    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

     import styled from 'styled-components';
    import themeGet from 'extensions/themeGet';

    const HelpCalloutContainer = styled.div`
      /* reset text styles */

      color: ${themeGet('colors.text.default')};
      font-style: normal;
      font-size: ${themeGet('fontSizes.default')};

      background-color: ${themeGet('colors.background.default')};
      border: 1px solid ${themeGet('colors.border.medium')};
      border-radius: 4px;
      overflow-y: auto;
      box-shadow: ${themeGet('shadows.short')};
      z-index: 100000;
      padding: ${themeGet('spacing.medium')};
      pointer-events: none;
      max-width: ${({ maxWidth }) =>
        typeof maxWidth === 'number' ? maxWidth + 'px' : maxWidth};

      &[data-placement*='top'] {
        margin-bottom: 6px;
      }
      &[data-placement*='bottom'] {
        margin-top: 6px;
      }
      &[data-placement*='right'] {
        margin-left: 6px;
      }
      &[data-placement*='left'] {
        margin-right: 6px;
      }
    `;

    export default HelpCalloutContainer;