angular-ui-kit/src/prime-preset/tokens/components/panelmenu.ts at cb050bc62ba50555c5e13c4a56f721da04742a7b · cdek-it/angular-ui-kit · 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
export const panelmenuCss = ({ dt }: { dt: (token: string) => string }): string => `
  .p-panelmenu {
    gap: ${dt('panelmenu.extend.extPanel.gap')};
  }

  .p-panelmenu-panel {
    padding: ${dt('panelmenu.extend.extPanel.gap')};
  }

  .p-panelmenu-header-content,
  .p-panelmenu-item-content {
    font-size: ${dt('fonts.fontSize.300')};
  }

  .p-panelmenu-submenu-icon {
    font-size: ${dt('panelmenu.extend.iconSize')};
  }

  /* ─── Active & Focused States ─── */

  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active > .p-panelmenu-item-content,
  .p-panelmenu .p-panelmenu-item.p-focus > .p-panelmenu-item-content,
  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content {
    background: ${dt('panelmenu.extend.extItem.activeBackground')};
    color: ${dt('panelmenu.extend.extItem.activeColor')};
  }

  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active > .p-panelmenu-item-content :is(.p-panelmenu-item-link, .p-panelmenu-item-label, .p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
  .p-panelmenu .p-panelmenu-item.p-focus > .p-panelmenu-item-content :is(.p-panelmenu-item-link, .p-panelmenu-item-label, .p-panelmenu-item-icon, .p-panelmenu-header-icon, .p-panelmenu-submenu-icon),
  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content :is(.p-panelmenu-header-link, .p-panelmenu-header-label, .p-panelmenu-submenu-icon, .p-panelmenu-item-icon, .p-panelmenu-header-icon) {
    color: ${dt('panelmenu.extend.extItem.activeColor')};
  }

  /* ─── Hover on Active States ─── */

  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover,
  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover,
  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover {
    background: ${dt('panelmenu.item.focusBackground')};
    color: ${dt('panelmenu.item.focusColor')};
  }

  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-link, .p-panelmenu-item-label),
  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-link, .p-panelmenu-item-label),
  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover :is(.p-panelmenu-header-link, .p-panelmenu-header-label) {
    color: ${dt('panelmenu.item.focusColor')};
  }

  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover :is(.p-panelmenu-submenu-icon, .p-panelmenu-item-icon) {
    color: ${dt('panelmenu.item.icon.focusColor')};
  }

  /* ─── Captions ─── */

  .p-panelmenu .panelmenu-item-label {
    display: flex;
    flex-direction: column;
    gap: ${dt('panelmenu.extend.extItem.caption.gap')};
  }

  .p-panelmenu .panelmenu-item-caption {
    font-size: ${dt('fonts.fontSize.200')};
    line-height: ${dt('fonts.lineHeight.450')};
    color: ${dt('panelmenu.extend.extItem.caption.color')};
  }
`;