mirror of https://github.com/vector-im/riot-web
98 lines
2.9 KiB
SCSS
98 lines
2.9 KiB
SCSS
/*
|
|
Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
.mx_InteractiveTooltip_wrapper {
|
|
position: fixed;
|
|
z-index: 5000;
|
|
}
|
|
|
|
.mx_InteractiveTooltip {
|
|
border-radius: 8px;
|
|
background-color: $background;
|
|
color: $primary-content;
|
|
position: absolute;
|
|
z-index: 5001;
|
|
box-shadow: 0 24px 8px rgb(17 17 26 / 4%), 0 8px 32px rgb(17 17 26 / 4%);
|
|
}
|
|
|
|
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
|
|
top: 10px; // 8px chevron + 2px spacing
|
|
}
|
|
|
|
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
|
|
left: 10px; // 8px chevron + 2px spacing
|
|
}
|
|
|
|
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
|
|
right: 10px; // 8px chevron + 2px spacing
|
|
}
|
|
|
|
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
|
|
bottom: 10px; // 8px chevron + 2px spacing
|
|
}
|
|
|
|
.mx_InteractiveTooltip_chevron_top {
|
|
position: absolute;
|
|
left: calc(50% - 8px);
|
|
top: -8px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-bottom: 8px solid $background;
|
|
border-right: 8px solid transparent;
|
|
}
|
|
|
|
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
|
// by Sebastiano Guerriero (@guerriero_se)
|
|
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
|
.mx_InteractiveTooltip_chevron_top {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-color: inherit;
|
|
border: none;
|
|
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
|
transform: rotate(135deg);
|
|
border-radius: 0 0 0 3px;
|
|
top: calc(-8px / 1.414); // sqrt(2) because of rotation
|
|
}
|
|
}
|
|
|
|
.mx_InteractiveTooltip_chevron_bottom {
|
|
position: absolute;
|
|
left: calc(50% - 8px);
|
|
bottom: -8px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-top: 8px solid $background;
|
|
border-right: 8px solid transparent;
|
|
}
|
|
|
|
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
|
// by Sebastiano Guerriero (@guerriero_se)
|
|
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
|
.mx_InteractiveTooltip_chevron_bottom {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-color: inherit;
|
|
border: none;
|
|
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
|
transform: rotate(-45deg);
|
|
border-radius: 0 0 0 3px;
|
|
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
|
|
}
|
|
}
|