47 lines
1.0 KiB
Plaintext
47 lines
1.0 KiB
Plaintext
// Generate a caret by embedding in the callout.
|
|
// Expects callout to have either selector-right or selecter-left class on it to determine directionality.
|
|
.caret() {
|
|
&::before,
|
|
&::after {
|
|
border-top: 10px @border-style-base @border-color-transparent;
|
|
border-bottom: 10px @border-style-base @border-color-transparent;
|
|
display: inline-block;
|
|
/* 17px aligns nicely with the size of the search row in language selection */
|
|
top: 17px;
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
&.selector-right {
|
|
&::before {
|
|
/* @noflip */
|
|
border-left: 10px @border-style-base @border-color-subtle;
|
|
/* @noflip */
|
|
right: -11px;
|
|
}
|
|
|
|
&::after {
|
|
/* @noflip */
|
|
border-left: 10px @border-style-base @border-color-inverted;
|
|
/* @noflip */
|
|
right: -10px;
|
|
}
|
|
}
|
|
|
|
&.selector-left {
|
|
&::before {
|
|
/* @noflip */
|
|
border-right: 10px @border-style-base @border-color-subtle;
|
|
/* @noflip */
|
|
left: -11px;
|
|
}
|
|
|
|
&::after {
|
|
/* @noflip */
|
|
border-right: 10px @border-style-base @border-color-inverted;
|
|
/* @noflip */
|
|
left: -10px;
|
|
}
|
|
}
|
|
}
|