move tooltip to admin.scss
This commit is contained in:
parent
6f00816efc
commit
2fe82678a5
@ -1782,4 +1782,88 @@ td{
|
||||
|
||||
}
|
||||
|
||||
// Fin
|
||||
|
||||
// Html5 Tooltip
|
||||
.info {
|
||||
color: #009bbf;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.info-text-top {
|
||||
visibility: hidden;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
max-width: 500px;
|
||||
min-width: fit-content;
|
||||
white-space: normal;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.info-text-top::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
.info-text-bottom {
|
||||
visibility: hidden;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
max-width: 500px;
|
||||
min-width: fit-content;
|
||||
white-space: normal;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 125%;
|
||||
left: 200%;
|
||||
margin-left: -60px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.info-text-bottom::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #555 transparent;
|
||||
}
|
||||
}
|
||||
.info:hover {
|
||||
.info-text-top {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.info-text-bottom {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Fin
|
||||
|
@ -189,7 +189,7 @@
|
||||
- display_comment = "#{line.comment[0..10]} (..)"
|
||||
- else
|
||||
- display_comment = line.comment
|
||||
- cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text'>#{line.comment}</span></span>"
|
||||
- cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text-top'>#{line.comment}</span></span>"
|
||||
|
||||
%td.p-0{class: ("best-price" if line.id == best_price[0])}
|
||||
=# "reponse price_line ID : #{line.id}"
|
||||
@ -306,51 +306,7 @@
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #009bbf;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.info-text {
|
||||
visibility: hidden;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
max-width: 500px;
|
||||
min-width: fit-content;
|
||||
white-space: normal;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.info-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
.info:hover {
|
||||
.info-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.darkblue {
|
||||
color: darkblue;
|
||||
}
|
||||
|
Reference in New Issue
Block a user