vue-devui/packages/devui-vue/devui/popover/src/popover.scss at 77fdfe60c1dbaecd86e70919dfd5e5726bea77d0 · DevCloudFE/vue-devui · 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
@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-popover__content.#{$devui-prefix}-flexible-overlay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: pre-wrap;
  padding: 4px 12px;
  line-height: 1.5;
  border-radius: $devui-border-radius-feedback;
  color: $devui-feedback-overlay-text;
  background-color: $devui-feedback-overlay-bg;
  font-size: $devui-font-size-sm;

  &.is-icon {
    flex-wrap: nowrap;
  }
}

.#{$devui-prefix}-popover--fade {
  &-bottom,
  &-top {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(1);
    }

    &-enter-active {
      transition: transform 0.1s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.1s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.1s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.1s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }

  &-left,
  &-right {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleX(0.8);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleX(1);
    }

    &-enter-active {
      transition: transform 0.1s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.1s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.1s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.1s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }
}