panels style.ts

0% Statements 0/17
0% Branches 0/2
0% Functions 0/12
0% Lines 0/17
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import styled, { css } from "styled-components";
import { StyledButton } from "ui/buttons/style";
 
interface StyledFloatingPanelProps {
  $vertical?: boolean;
}
 
export const StyledFloatingPanel = styled.div<StyledFloatingPanelProps>`
  display: flex;
  color: ${(props) => props.theme.colors.panel.text};
  background: ${(props) => props.theme.colors.panel.background};
  border: 1px solid ${(props) => props.theme.colors.panel.border};
  border-radius: 4px;
  padding: 0 4px;
 
  ${StyledButton} {
    width: 36px;
    height: 36px;
    border-radius: 0;
    padding: 5px;
    color: ${(props) => props.theme.colors.panel.text};
    background: ${(props) => props.theme.colors.panel.background};
 
    &:hover {
      background: ${(props) => props.theme.colors.panel.hoverBackground};
    }
 
    &:active {
      background: ${(props) => props.theme.colors.panel.activeBackground};
    }
 
    svg {
      fill: ${(props) => props.theme.colors.panel.icon};
      width: 20px;
      height: 20px;
      max-width: 20px;
      max-height: 20px;
    }
 
    &[data-is-active="true"] {
      background: ${(props) => props.theme.colors.panel.selectedBackground};
      svg {
        fill: ${(props) => props.theme.colors.panel.selectedIcon};
      }
    }
 
    & ~ ${StyledButton} {
      margin-left: 1px;
    }
  }
 
  ${(props) =>
    props.$vertical
      ? css`
          flex-direction: column;
          padding: 4px 0;
          ${StyledButton} {
            & ~ ${StyledButton} {
              margin-left: 0px;
              margin-bottom: 1px;
            }
          }
        `
      : ""}
 
  .CustomSelect {
    width: 120px;
 
    .CustomSelect__control {
      height: 36px;
      background: transparent;
      border: 0;
    }
 
    .CustomSelect__control:hover {
      border: 0;
    }
 
    .CustomSelect__control--is-focused {
      border: 0 !important;
      box-shadow: none !important;
    }
  }
`;
 
export const StyledFloatingPanelDivider = styled.div`
  background: ${(props) => props.theme.colors.panel.divider};
  min-width: 1px;
  min-height: 1px;
  align-self: stretch;
  margin: 5px 5px;
`;
 
export const StyledFloatingPanelBreak = styled.div`
  flex-basis: 100%;
  height: 0;
`;