plan-rules-layout PlanRulesLayout.ts

0% Statements 0/35

0% Branches 0/1

0% Functions 0/1

0% Lines 0/35

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import styled from '@emotion/styled';

export const PlanRulesLayout = Object.assign(
  styled.div`
    display: flex;
    flex-direction: column;
    gap: 16px;

    // Compensate the padding of the first and last children.
    margin: -8px 0;
  `,
  {
    Category: Object.assign(
      styled.div`
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 8px 0;
      `,
      {
        Rules: styled.div`
          /**
           * I could have use a display column + gap 16px, but it's not working very well with react-beautiful-dnd.
           * So I'm adding padding to each element inside the rules, and canceling the margin of the first and last element by setting a negative margin on the container.
           * It works, but it's not very clean. It doesn't work on categories but I don't know why (probably caused by the extra padding on the container).
           */
          margin: -8px 0;
          > * {
            padding: 8px 0;
          }
        `,
      },
    ),
  },
);