sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Shape
5
      'rounded-md',
6

7
      // Size
8
      'min-w-[12rem]',
9
      'p-1',
10

11
      // Colors
12
      'bg-surface-0 dark:bg-surface-900',
13
      'border border-surface-200 dark:border-surface-700',
14
    ],
15
  },
16
  rootList: {
17
    class: [
18
      // Spacings and Shape
19
      'list-none',
20
      'flex flex-col',
21
      'm-0 p-0',
22
      'outline-none',
23
    ],
24
  },
25
  item: {
26
    class: 'relative my-[2px] [&:first-child]:mt-0',
27
  },
28
  itemContent: ({ context }) => ({
29
    class: [
30
      //Shape
31
      'rounded-[4px]',
32

33
      // Colors
34
      {
35
        'text-surface-500 dark:text-white/70':
36
          !context.focused && !context.active,
37
        'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90':
38
          context.focused && !context.active,
39
        'bg-highlight text-highlight-contrast':
40
          (context.focused && context.active) ||
41
          context.active ||
42
          (!context.focused && context.active),
43
      },
44

45
      // Transitions
46
      'transition-shadow',
47
      'duration-200',
48

49
      // States
50
      {
51
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
52
          !context.active,
53
        'hover:bg-highlight-emphasis': context.active,
54
      },
55

56
      // Disabled
57
      { 'opacity-60 pointer-events-none cursor-default': context.disabled },
58
    ],
59
  }),
60
  itemLink: {
61
    class: [
62
      'relative',
63
      // Flexbox
64

65
      'flex',
66
      'items-center',
67

68
      // Spacing
69
      'py-2',
70
      'px-3',
71

72
      // Misc
73
      'no-underline',
74
      'overflow-hidden',
75
      'cursor-pointer',
76
      'select-none',
77
    ],
78
  },
79
  itemIcon: {
80
    class: [
81
      // Spacing
82
      'mr-2',
83
    ],
84
  },
85
  itemLabel: {
86
    class: ['leading-none'],
87
  },
88
  submenuIcon: {
89
    class: [
90
      // Position
91
      'ml-auto',
92
    ],
93
  },
94
  submenu: {
95
    class: [
96
      // Spacing
97
      'flex flex-col',
98
      'm-0',
99
      'p-1',
100
      'list-none',
101
      'min-w-[12.5rem]',
102

103
      // Shape
104
      'shadow-none sm:shadow-md',
105
      'border border-surface-200 dark:border-surface-700',
106

107
      // Position
108
      'static sm:absolute',
109
      'z-10',
110

111
      // Color
112
      'bg-surface-0 dark:bg-surface-900',
113
    ],
114
  },
115
  separator: {
116
    class: 'border-t border-surface-200 dark:border-surface-600',
117
  },
118
  transition: {
119
    enterFromClass: 'opacity-0',
120
    enterActiveClass: 'transition-opacity duration-250',
121
  },
122
};
123