sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      // Flex and Position
5
      'flex relative',
6
      { 'justify-center': props.layout == 'vertical' },
7
      { 'items-center': props.layout == 'vertical' },
8
      {
9
        'justify-start': props?.align == 'left' && props.layout == 'horizontal',
10
        'justify-center':
11
          props?.align == 'center' && props.layout == 'horizontal',
12
        'justify-end': props?.align == 'right' && props.layout == 'horizontal',
13
        'items-center': props?.align == 'top' && props.layout == 'vertical',
14
        'items-start': props?.align == 'center' && props.layout == 'vertical',
15
        'items-end': props?.align == 'bottom' && props.layout == 'vertical',
16
      },
17

18
      // Spacing
19
      {
20
        'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
21
        'mx-4 md:mx-5 py-5': props.layout == 'vertical',
22
      },
23

24
      // Size
25
      {
26
        'w-full': props.layout == 'horizontal',
27
        'min-h-full': props.layout == 'vertical',
28
      },
29

30
      // Before: Line
31
      'before:block',
32

33
      // Position
34
      {
35
        'before:absolute before:left-0 before:top-1/2':
36
          props.layout == 'horizontal',
37
        'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2':
38
          props.layout == 'vertical',
39
      },
40

41
      // Size
42
      {
43
        'before:w-full': props.layout == 'horizontal',
44
        'before:min-h-full': props.layout == 'vertical',
45
      },
46

47
      // Shape
48
      {
49
        'before:border-solid': props.type == 'solid',
50
        'before:border-dotted': props.type == 'dotted',
51
        'before:border-dashed': props.type == 'dashed',
52
      },
53

54
      // Color
55
      {
56
        'before:border-t before:border-surface-200 before:dark:border-surface-600':
57
          props.layout == 'horizontal',
58
        'before:border-l before:border-surface-200 before:dark:border-surface-600':
59
          props.layout == 'vertical',
60
      },
61
    ],
62
  }),
63
  content: {
64
    class: [
65
      // Space and Position
66
      'px-1 z-10',
67

68
      // Color
69
      'bg-surface-0 dark:bg-surface-800',
70
    ],
71
  },
72
};
73