chatbot/packages/module/src/Message/QuickResponse/QuickResponse.scss at 6e1fed080f1b4a416de9e283f5755b98e17382b7 · thatblindgeye/chatbot · 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
.pf-chatbot__message-quick-response {
  .pf-v6-c-label {
    &:not(.pf-m-compact) {
      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
    }

    @media screen and (min-width: 401px) and (max-width: 600px) {
      --pf-v6-c-label__text--MaxWidth: 20ch;
    }

    @media screen and (max-width: 400px) {
      --pf-v6-c-label__text--MaxWidth: 15ch;
    }
  }

  .pf-chatbot__message-quick-response--selected {
    .pf-v6-c-label__content:is(:hover, :focus) {
      --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
      --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
    }
  }

  .pf-chatbot__message-quick-response--selected:hover,
  .pf-chatbot__message-quick-response--selected:focus {
    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
  }

  // active state right before selection
  .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
  }
}