shesha-framework/shesha-reactjs/src/components/dropdown/style.ts at 7b7519aa0fd4351fabe35733bf719b46570a53bf · shesha-io/shesha-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { createStyles } from '@/styles';
import { CSSProperties } from 'react';

export const useStyles = createStyles(({ css, cx, token }, { style }: { style: CSSProperties }) => {
  const dropdown = cx("sha-dropdown", css`
    --ant-color-text: ${style.color} !important;
    --ant-font-weight-strong: ${style.fontWeight} !important;
    --ant-select-multiple-item-bg: transparent !important;

    .ant-select-selector {
        ${(style.height !== 'auto' || !style.height) && 'overflow-y: auto;'}
        .ant-select-selection-overflow {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            justify-content: ${style.textAlign};
        }

        scrollbar-width: thin;
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
    }

    input {
      font-size: ${style.fontSize} !important;
    }

    .ant-tag {
      margin: 0;
      align-content: center;
      display: inline-flex;
      align-items: center;
      overflow: hidden;
      justify-content: ${style.textAlign};
    }

    .ant-select-selection-item {
      font-size: ${style.fontSize} !important;
      font-weight: var(--ant-font-weight) !important;
      --ant-line-width: 0px !important;
      line-height: unset !important;
      overflow: visible;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: ${style.textAlign};

      .ant-select-selection-item-content {
        display: flex;
        overflow: visible;
      }

      :hover {
        border: none !important;
        .ant-tag {
          align-content: center;
          cursor: default !important;
          pointer-events: none !important;
        }
      }
    }

    &.ant-select-open, &:hover {
      border-color: ${token.colorPrimary} !important;
    }
  `);

  return {
    dropdown,
  };
});