123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- #conversejs {
- [hidden] { display: none; }
- .visually-hidden {
- position: absolute;
- clip: rect(0, 0, 0, 0);
- }
- .form-group {
- .suggestion-box,
- .awesomplete {
- width: 100%;
- }
- }
- .suggestion-box,
- .awesomplete {
- position: relative;
- mark {
- background: $lightest-red;
- }
- > input {
- display: block;
- }
- .suggestion-box__results,
- > ul {
- &:before {
- content: "";
- position: absolute;
- top: -.43em;
- left: 1em;
- width: 0; height: 0;
- padding: .4em;
- background: white;
- border: inherit;
- border-right: 0;
- border-bottom: 0;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- z-index: 1;
- }
- position: absolute;
- left: 0;
- right: 0;
- z-index: 2;
- min-width: 100%;
- box-sizing: border-box;
- list-style: none;
- padding: 0;
- border-radius: .3em;
- margin: .2em 0 0;
- background: hsla(0,0%,100%,.9);
- background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
- border: 1px solid rgba(0,0,0,.3);
- box-shadow: .05em .2em .6em rgba(0,0,0,.1);
- text-shadow: none;
- > li {
- text-overflow: ellipsis;
- overflow-x: hidden;
- position: relative;
- cursor: pointer;
- padding: 1em;
- }
- }
- .suggestion-box__results--above {
- bottom: 4.5em;
- &:before {
- display: none;
- }
- &:after {
- z-index: 1;
- content: "";
- position: absolute;
- bottom: -.43em;
- left: 1em;
- width: 0; height: 0;
- padding: .4em;
- background: white;
- border: inherit;
- border-left: 0;
- border-top: 0;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- }
- }
- .suggestion-box > ul[hidden],
- .suggestion-box > ul:empty,
- div.awesomplete > ul[hidden],
- div.awesomplete > ul:empty {
- display: none;
- }
- @supports (transform: scale(0)) {
- .suggestion-box > ul,
- div.awesomplete > ul {
- transition: .3s cubic-bezier(.4,.2,.5,1.4);
- transform-origin: 1.43em -.43em;
- }
-
- .suggestion-box > ul[hidden],
- .suggestion-box > ul:empty,
- div.awesomplete > ul[hidden],
- div.awesomplete > ul:empty {
- opacity: 0;
- transform: scale(0);
- display: block;
- transition-timing-function: ease;
- }
- }
-
- .suggestion-box > ul > li[aria-selected="true"],
- div.awesomplete > ul > li[aria-selected="true"] {
- background: $dark-red;
- color: $inverse-link-color;
- }
-
- .suggestion-box li:hover mark,
- div.awesomplete li:hover mark {
- background: $lightest-red;
- color: $inverse-link-color;
- }
-
- .suggestion-box li[aria-selected="true"] mark,
- div.awesomplete li[aria-selected="true"] mark {
- background: $red;
- color: inherit;
- }
- }
- #conversejs.converse-fullscreen {
- .suggestion-box__results--above {
- bottom: 4.5em;
- }
- }
- #conversejs.converse-overlayed {
- .suggestion-box__results--above {
- bottom: 5.5em;
- }
- }
|