All files / src/components/ui/form/headers style.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled, { css } from "styled-components";
import { StyledPillButton } from "ui/buttons/style";
 
interface StyledPrefabHeaderProps {
  $prefabSet: boolean;
}
 
export const StyledPrefabHeader = styled.div<StyledPrefabHeaderProps>`
  ${(props) =>
    props.$prefabSet
      ? css`
          background: ${(props) => props.theme.colors.prefab.background};
          color: ${(props) => props.theme.colors.prefab.text};
          position: sticky;
          z-index: 1;
          top: 0;
 
          ${StyledPillButton} {
            background: ${(props) =>
              props.theme.colors.prefab.button.background};
            color: ${(props) => props.theme.colors.prefab.button.text};
            &:hover {
              background: ${(props) =>
                props.theme.colors.prefab.button.hoverBackground};
            }
          }
 
          &&& svg {
            fill: ${(props) => props.theme.colors.prefab.button.text};
          }
        `
      : ""}
 
  font-size: 11px;
  width: 100%;
  height: 38px;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
 
  ${StyledPillButton} {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
  }
 
  && svg {
    max-height: 10px;
    fill: ${(props) => props.theme.colors.text};
  }
`;