tiny-robot/packages/components/src/sender-actions/styles/tooltip.less at fa70659a0beb298df21707bfc3b1922a862e7190 · SonyLeo/tiny-robot · 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
.tr-sender-tooltip-gap-mixin() {
  &[data-popper-placement^='top'],
  &[x-placement^='top'],
  &[data-placement^='top'] {
    padding-bottom: var(--tr-sender-tooltip-gap, 8px);
  }

  &[data-popper-placement^='bottom'],
  &[x-placement^='bottom'],
  &[data-placement^='bottom'] {
    padding-top: var(--tr-sender-tooltip-gap, 8px);
  }

  &[data-popper-placement^='left'],
  &[x-placement^='left'],
  &[data-placement^='left'] {
    padding-right: var(--tr-sender-tooltip-gap, 8px);
  }

  &[data-popper-placement^='right'],
  &[x-placement^='right'],
  &[data-placement^='right'] {
    padding-left: var(--tr-sender-tooltip-gap, 8px);
  }
}

.tr-sender-tooltip-shell-mixin() {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.tr-sender-tooltip-inner-base-mixin() {
  display: block;
  min-width: 10px;
  max-width: 450px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.tr-sender-tooltip-light-inner-mixin() {
  .tr-sender-tooltip-inner {
    .tr-sender-tooltip-inner-base-mixin();
    padding: var(--tv-Tooltip-padding-y) var(--tv-Tooltip-padding-x);
    color: var(--tv-Tooltip-popper-light-text-color);
    font-size: var(--tv-Tooltip-popper-font-size);
    line-height: var(--tv-Tooltip-popper-font-line-height);
    background: var(--tv-Tooltip-popper-light-bg-color);
    border-radius: var(--tv-Tooltip-popper-border-radius);
    box-shadow: var(--tv-Tooltip-box-shadow);
  }
}

.tr-sender-tooltip-light-popper-mixin() {
  .tr-sender-tooltip-shell-mixin();
  .tr-sender-tooltip-gap-mixin();
  .tr-sender-tooltip-light-inner-mixin();
}