sposchedule

1
export default {
2
  panel: {
3
    class:
4
      'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md',
5
  },
6
  header: {
7
    class: ['rounded-[4px]', 'outline-none'],
8
  },
9
  headerContent: ({ context }) => ({
10
    class: [
11
      // Shape
12
      'rounded-[4px]',
13

14
      // Color
15
      'bg-surface-0 dark:bg-surface-900',
16
      'text-surface-600 dark:text-surface-0/80',
17
      { 'text-surface-900': context.active },
18

19
      // States
20
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
21
      'hover:text-surface-900',
22

23
      // Transition
24
      'transition duration-200 ease-in-out',
25
      'transition-shadow duration-200',
26
    ],
27
  }),
28
  headerLink: {
29
    class: [
30
      'relative',
31

32
      // Font
33
      'font-semibold',
34
      'leading-none',
35

36
      // Flex & Alignments
37
      'flex items-center',
38

39
      // Spacing
40
      'py-2 px-3',
41

42
      // Misc
43
      'select-none cursor-pointer no-underline',
44
    ],
45
  },
46
  headerLabel: {
47
    class: 'leading-none',
48
  },
49
  headerIcon: {
50
    class: 'mr-2',
51
  },
52
  submenuIcon: {
53
    class: 'mr-2',
54
  },
55
  content: {
56
    class: [
57
      // Spacing
58
      'pl-4',
59

60
      // Color
61
      'text-surface-700 dark:text-white/80',
62
      'bg-surface-0 dark:bg-surface-900',
63
    ],
64
  },
65
  rootList: {
66
    class: ['outline-none', 'm-0 p-0 list-none'],
67
  },
68
  menuitem: {
69
    class: 'relative my-[2px]',
70
  },
71
  itemContent: {
72
    class: [
73
      // Shape
74
      'border-none rounded-[4px]',
75

76
      // Color
77
      'text-surface-700 dark:text-white/80',
78

79
      // Transition
80
      'transition-shadow duration-200',
81
    ],
82
  },
83
  itemLink: ({ context }) => ({
84
    class: [
85
      'relative',
86

87
      // Font
88
      'leading-none',
89

90
      // Flex & Alignments
91
      'flex items-center',
92

93
      // Spacing
94
      'py-2 px-3',
95

96
      // Shape
97
      'rounded-[4px]',
98

99
      // Color
100
      'text-surface-700 dark:text-white/80',
101

102
      // States
103
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
104
      {
105
        'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10':
106
          context.focused,
107
      },
108

109
      // Misc
110
      'cursor-pointer no-underline',
111
      'select-none overflow-hidden',
112
    ],
113
  }),
114
  itemIcon: {
115
    class: 'mr-2',
116
  },
117
  submenu: {
118
    class: 'p-0 pl-4 m-0 list-none',
119
  },
120
  transition: {
121
    enterFromClass: 'max-h-0',
122
    enterActiveClass:
123
      'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
124
    enterToClass: 'max-h-[1000px]',
125
    leaveFromClass: 'max-h-[1000px]',
126
    leaveActiveClass:
127
      'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
128
    leaveToClass: 'max-h-0',
129
  },
130
};
131