sba-mint/src/app/components/search-input/search-input.component.css at d61d8d500910f4aa034578ca807d7a51c4666d9a · sinequa/sba-mint · 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
:host {
  /* Hides cancel button from input that as type='search' */
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  &:has([popover]:popover-open) {
    z-index: 5000;
    box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, 0.3);
  }

  [popover]::backdrop {
    background-color: transparent;
    backdrop-filter: none;
  }
}

#autocomplete-anchor {
  anchor-name: --anchor;
}

[popover] {
  /* Select Firefox */
  @supports (-moz-appearance: none) {
    margin: calc(33.3333333333vh + 30px) 25vw;
    width: 50vw;
  }

  /* Select Safari */
  @supports (background: -webkit-named-image(i)) {
    margin: calc(33.3333333333vh + 30px) 25vw;
    width: 50vw;
  }

  position-anchor: --anchor;
  width: anchor-size(width);
  top: anchor(bottom);
  left: anchor(left);
  margin: 0;
  padding: 0;
  border-radius: 0 0 6px 6px;
}

.animate-save {
  animation: saved 1s;
}

@keyframes saved {
  0% {
    transform: translateY(0px) rotateZ(0);
  }
  10% {
    transform: translateY(2px) rotateZ(-10deg);
  }
  50% {
    transform: translateY(-10px) rotateZ(370deg);
  }
  90% {
    transform: translateY(2px) rotateZ(360deg);
  }
  100% {
    transform: translateY(0px) rotateZ(360deg);
  }
}