sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      'relative',
5

6
      // Flexbox
7
      'flex',
8

9
      // Shape & Size
10
      'rounded-md',
11

12
      // Color
13
      'bg-surface-0 dark:bg-surface-900',
14
      'border border-surface-200 dark:border-surface-700',
15
      {
16
        'p-2 items-center': props.orientation == 'horizontal',
17
        'flex-col sm:w-48 p-1': props.orientation !== 'horizontal',
18
      },
19
    ],
20
  }),
21
  rootList: ({ props }) => ({
22
    class: [
23
      // Flexbox
24
      'sm:flex',
25
      'items-center',
26
      'flex-wrap',
27
      'flex-col sm:flex-row',
28
      { hidden: !props?.mobileActive, flex: props?.mobileActive },
29

30
      // Position
31
      'absolute sm:relative',
32
      'top-full left-0',
33
      'sm:top-auto sm:left-auto',
34

35
      // Size
36
      'w-full sm:w-auto',
37

38
      // Spacing
39
      'm-0',
40
      'p-1 sm:py-0 sm:p-0',
41
      'list-none',
42

43
      // Shape
44
      'shadow-md sm:shadow-none',
45
      'border-0',
46

47
      // Color
48
      'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
49

50
      // Misc
51
      'outline-none',
52
    ],
53
  }),
54
  item: ({ props }) => ({
55
    class: [
56
      'sm:relative static my-[2px] [&:first-child]:mt-0',
57
      {
58
        'sm:w-auto w-full': props.horizontal,
59
        'w-full': !props.horizontal,
60
      },
61
    ],
62
  }),
63
  itemContent: ({ context }) => ({
64
    class: [
65
      'rounded-[4px]',
66

67
      //  Colors
68
      {
69
        'text-surface-500 dark:text-white/70':
70
          !context.focused && !context.active,
71
        'text-surface-500 dark:text-white/70 bg-surface-200':
72
          context.focused && !context.active,
73
        'bg-highlight':
74
          (context.focused && context.active) ||
75
          context.active ||
76
          (!context.focused && context.active),
77
      },
78

79
      // Hover States
80
      {
81
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
82
          !context.active,
83
        'hover:bg-highlight-emphasis': context.active,
84
      },
85

86
      // Transitions
87
      'transition-all',
88
      'duration-200',
89
    ],
90
  }),
91
  itemLink: {
92
    class: [
93
      'relative',
94

95
      // Flexbox
96
      'flex',
97
      'items-center',
98

99
      // Spacing
100
      'py-2',
101
      'px-3',
102

103
      // Size
104
      'leading-none',
105

106
      // Misc
107
      'select-none',
108
      'cursor-pointer',
109
      'no-underline ',
110
      'overflow-hidden',
111
    ],
112
  },
113
  itemIcon: {
114
    class: 'mr-2',
115
  },
116
  submenuIcon: ({ props }) => ({
117
    class: [
118
      {
119
        'ml-auto sm:ml-2': props.horizontal,
120
        'ml-auto': !props.horizontal,
121
      },
122
    ],
123
  }),
124
  overlay: ({ props }) => ({
125
    class: [
126
      // Size
127
      'w-auto',
128

129
      // Spacing
130
      'm-0',
131

132
      // Shape
133
      'shadow-none sm:shadow-md',
134

135
      'rounded-md',
136

137
      // Color
138
      'bg-surface-0 dark:bg-surface-900',
139

140
      // Position
141
      'static sm:absolute',
142
      'z-10',
143
      {
144
        'sm:left-full top-0': !props.horizontal,
145
      },
146
    ],
147
  }),
148
  grid: {
149
    class: 'flex flex-wrap sm:flex-nowrap',
150
  },
151
  column: {
152
    class: 'w-full sm:w-1/2',
153
  },
154
  submenu: {
155
    class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]'],
156
  },
157
  submenuLabel: {
158
    class: [
159
      'font-semibold',
160

161
      // Spacing
162
      'py-2 px-3',
163
      'm-0',
164

165
      // Color
166
      'text-surface-400 dark:text-surface-500',
167
      'bg-surface-0 dark:bg-surface-900',
168
    ],
169
  },
170
  separator: {
171
    class: 'border-t border-surface-200 dark:border-surface-600 my-1',
172
  },
173
  button: {
174
    class: [
175
      // Flexbox
176
      'flex sm:hidden',
177
      'items-center justify-center',
178

179
      // Size
180
      'w-7',
181
      'h-7',
182

183
      // Shape
184
      'rounded-full',
185
      // Color
186
      'text-surface-500 dark:text-white/80',
187

188
      // States
189
      'hover:text-surface-600 dark:hover:text-white/60',
190
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
191
      'focus:outline-none focus:outline-offset-0',
192
      'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
193

194
      // Transitions
195
      'transition duration-200 ease-in-out',
196

197
      // Misc
198
      'cursor-pointer',
199
      'no-underline',
200
    ],
201
  },
202
  end: {
203
    class: 'ml-auto self-center',
204
  },
205
};
206