shesha-framework/shesha-reactjs/src/components/readOnlyDisplayFormItem/styles/styles.ts at ac0d49d6d21b55e0eaaf45ff80519821ea114ea8 · czwe-01/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
import { createStyles } from '@/styles';
import { sheshaStyles, getTextHoverEffects } from '@/styles';

export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
  const readOnlyModeToggler = "read-only-mode-toggler";
  const readOnlyDisplayFormItem = cx("read-only-display-form-item", css`
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        &.${prefixCls}-form-item {
            margin-bottom: unset;
        }

        .${readOnlyModeToggler} {
              margin-left: ${sheshaStyles.paddingLG}px;

              &:not(.disabled) {
                cursor: pointer;
                ${getTextHoverEffects(token)}
            }
        }

        /* Ensure content doesn't overflow */
        > * {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Handle Space component for multiple items */
        .${prefixCls}-space {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        /* Handle tags and other components */
        .${prefixCls}-tag {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
  `);

  const inputField = css`
    padding: 0px 8px;
    margin: 0;
    margin-right: 8px;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    // white-space: nowrap;
  `;

  return {
    readOnlyDisplayFormItem,
    readOnlyModeToggler,
    inputField,
  };
});