web-components/packages/aura/src/components/item-overlay.css at fe5e10b9697ebf238b5745b6ebf51085aa0d24a5 · vaadin/web-components · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
:where(:root),
:where(:host) {
  --aura-item-overlay-padding-inline: var(--vaadin-padding-xs);
  --aura-item-overlay-padding-block: var(--vaadin-padding-xs);
  --vaadin-item-overlay-padding: var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);
  --vaadin-item-border-radius: clamp(
    0px,
    var(--aura-item-overlay-padding-inline) * 100,
    var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block))
  );
  --vaadin-item-gap: var(--vaadin-gap-s);
}

vaadin-avatar-group-menu-item,
vaadin-combo-box-item,
vaadin-context-menu-item,
vaadin-time-picker-item,
vaadin-item,
vaadin-menu-bar-item,
vaadin-multi-select-combo-box-item,
vaadin-select-item:where([role]) {
  font-weight: var(--aura-font-weight-medium);
  -webkit-user-select: none;
  user-select: none;
  --_highlight-color: light-dark(
    oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
    oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
  );
  padding-inline-start: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));
  gap: 0;

  &::part(checkmark) {
    color: var(--vaadin-item-checkmark-color, var(--aura-accent-text-color));
    --vaadin-icon-visual-size: 75%;
  }

  &[aria-haspopup='true'] {
    padding-inline-end: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));

    &::after {
      --vaadin-icon-visual-size: 90%;
    }
  }

  &::part(content) {
    padding-inline: var(--vaadin-gap-xs);
    gap: var(--vaadin-item-gap);
  }

  @media (any-hover: hover) {
    &:not([disabled], [aria-disabled='true']):hover {
      background: var(--_highlight-color);

      &[theme~='filled'] {
        background: var(--aura-accent-color);
        color: var(--aura-accent-contrast-color);
        --vaadin-text-color: var(--aura-accent-contrast-color);
        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
        --vaadin-icon-color: var(--aura-accent-contrast-color);
        --vaadin-item-checkmark-color: var(--aura-accent-contrast-color);
      }
    }
  }

  &:active {
    background: var(--_highlight-color);
  }

  /* Suppress hover highlight during safe triangle navigation */
  @media (any-hover: hover) {
    [safe-triangle-active] > &:not([aria-expanded='true']):not([disabled], [aria-disabled='true']):hover {
      background: transparent;
    }
  }

  &[aria-expanded='true']:not(:hover) {
    background: var(--vaadin-background-container-strong);
  }

  &:where(
    [theme~='danger'],
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    .v-info,
    .v-success,
    .v-warning,
    .v-error
  ) {
    color: var(--aura-accent-text-color);

    > * {
      --aura-accent-color-light: var(--aura-accent-color-light-initial);
      --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
      --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
    }
  }
}

/* TODO is there a better selector? */
[role='menu'] [role='separator'] {
  margin-block: var(--vaadin-gap-xs);
  margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container));
  border-color: var(--vaadin-border-color);
}