sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Sizing and Shape
5
      'min-w-[12.5rem]',
6
      'rounded-md',
7
      'shadow-md',
8

9
      // Spacing
10
      'p-1',
11

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

36
      // Colors
37
      'text-surface-700 dark:text-white/80',
38
      {
39
        'text-surface-500 dark:text-white/70':
40
          !context.focused && !context.active,
41
        'text-surface-500 dark:text-white/70 bg-surface-200':
42
          context.focused && !context.active,
43
        'bg-highlight':
44
          (context.focused && context.active) ||
45
          context.active ||
46
          (!context.focused && context.active),
47
      },
48

49
      // Transitions
50
      'transition-shadow',
51
      'duration-200',
52

53
      // States
54
      {
55
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
56
          !context.active,
57
        'hover:bg-highlight-emphasis': context.active,
58
      },
59

60
      // Disabled
61
      { 'opacity-60 pointer-events-none cursor-default': context.disabled },
62
    ],
63
  }),
64
  itemLink: {
65
    class: [
66
      'relative',
67
      // Flexbox
68

69
      'flex',
70
      'items-center',
71

72
      // Spacing
73
      'py-2',
74
      'px-3',
75

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

79
      // Misc
80
      'no-underline',
81
      'overflow-hidden',
82
      'cursor-pointer',
83
      'select-none',
84
    ],
85
  },
86
  itemIcon: {
87
    class: [
88
      // Spacing
89
      'mr-2',
90

91
      // Color
92
      'text-surface-600 dark:text-white/70',
93
    ],
94
  },
95
  itemLabel: {
96
    class: ['leading-none'],
97
  },
98
  submenu: ({ props }) => ({
99
    class: [
100
      'flex flex-col',
101
      // Size
102
      'w-full sm:w-48',
103

104
      // Spacing
105
      'p-1',
106
      'm-0',
107
      'list-none',
108

109
      // Shape
110
      'shadow-md',
111
      'rounded-md',
112
      'dark:border dark:border-surface-700',
113

114
      // Position
115
      'static sm:absolute',
116
      'z-10',
117
      { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
118

119
      // Color
120
      'bg-surface-0 dark:bg-surface-900',
121
    ],
122
  }),
123
  submenuIcon: {
124
    class: ['ml-auto'],
125
  },
126
  separator: {
127
    class: 'border-t border-surface-200 dark:border-surface-600 my-1',
128
  },
129
  transition: {
130
    enterFromClass: 'opacity-0',
131
    enterActiveClass: 'transition-opacity duration-250',
132
  },
133
};
134