@charset "utf-8"; | |
@import "../util"; | |
/** | |
* Rules for the Kalamar hint helper. | |
*/ | |
ul.menu.hint { | |
display: inline-block; | |
white-space: normal; | |
text-align: left; | |
max-width: 23em !important; | |
top: 0; | |
> li:first-of-type { | |
border-top: { | |
width: 1px; | |
left-radius: 0; | |
right-radius: 0; | |
} | |
} | |
} | |
// Alert bubble | |
div.alert.hint { | |
position: absolute; | |
background-color: $alert-red; | |
color: $nearly-white; | |
padding: $item-padding; | |
margin-top: 8px; | |
box-shadow: $choose-box-shadow; | |
width: auto; | |
min-width: 10em; | |
max-width: 23em !important; | |
transition: opacity 0.2s ease 0s; | |
border: { | |
radius: $standard-border-radius; | |
top-left-radius: 0; | |
} | |
&::before { | |
position: absolute; | |
content: ""; | |
display: block; | |
top: -12px; | |
left: 0; | |
width: 0; | |
white-space: normal; | |
border: { | |
width: 0 8px 12px 0; | |
style: solid; | |
color: $alert-red transparent; | |
} | |
} | |
} | |
// Mirror element for the hint helper | |
.hint.mirror { | |
position: absolute; | |
display: block; | |
left: 0; | |
top: 0; | |
z-index: 90; | |
white-space: pre-wrap; | |
height: 0; | |
> span { | |
opacity: 0; | |
white-space: pre-wrap; | |
overflow: hidden; | |
} | |
// TODO: Only in focus | |
> div { | |
position: absolute; | |
display: block; | |
cursor: pointer; | |
transition: left 0.2s ease 0s; | |
top: 0; | |
left: 0; | |
text-align: left; | |
padding: 0; | |
border-top: 5px solid $dark-orange; | |
height: 10px; | |
width: 1.2em; | |
&:hover:not(.active) { | |
border-top: 10px solid $dark-orange; | |
} | |
&.active { | |
border-top-width: 0; | |
height: 0; | |
width: 23em; | |
} | |
} | |
} |