sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      // Positioning
5
      'absolute z-1',
6
      {
7
        'left-0 bottom-0 w-full': props.position == 'bottom',
8
        'left-0 top-0 w-full': props.position == 'top',
9
        'left-0 top-0 h-full': props.position == 'left',
10
        'right-0 top-0 h-full': props.position == 'right',
11
      },
12

13
      // Flexbox & Alignment
14
      'flex justify-center items-center',
15

16
      // Interactivity
17
      'pointer-events-none',
18
    ],
19
  }),
20
  listContainer: {
21
    class: [
22
      // Flexbox
23
      'flex',
24

25
      // Shape & Border
26
      'rounded-md',
27

28
      // Color
29
      'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
30
      'backdrop-blur-sm',
31

32
      // Spacing
33
      'p-2',
34

35
      // Misc
36
      'pointer-events-auto',
37
    ],
38
  },
39
  list: ({ props }) => ({
40
    class: [
41
      // Flexbox & Alignment
42
      'flex items-center justify-center',
43
      {
44
        'flex-col': props.position == 'left' || props.position == 'right',
45
      },
46

47
      // List Style
48
      'm-0 p-0 list-none',
49

50
      // Shape
51
      'outline-none',
52
    ],
53
  }),
54
  item: ({ props, context, instance }) => ({
55
    class: [
56
      // Spacing & Shape
57
      'p-2 rounded-md',
58

59
      // Positioning & Hover States
60
      {
61
        'origin-bottom': props.position == 'bottom',
62
        'origin-top': props.position == 'top',
63
        'origin-left': props.position == 'left',
64
        'origin-right': props.position == 'right',
65
      },
66

67
      // Transitions & Transform
68
      'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
69
    ],
70
  }),
71
  itemLink: {
72
    class: [
73
      // Flexbox & Alignment
74
      'flex flex-col items-center justify-center',
75

76
      // Position
77
      'relative',
78

79
      // Size
80
      'w-16 h-16',
81

82
      // Misc
83
      'cursor-default overflow-hidden',
84
    ],
85
  },
86
};
87