f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00
Code Wiki Activity

Added tooltip to metadata editor and upped the version of font awesome

Browse Source
This commit is contained in:
Scott Tolksdorf
2017-01-14 14:35:36 -08:00
parent 5fe7c7a6d8
commit 9b936f42f3
5 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
shared/homebrewery/renderWarnings/renderWarnings.less
View File

@@ -1,5 +1,5 @@
.warnings{
.renderWarnings{
position : fixed;
display : inline-block;
top : @navbarHeight;

103
shared/naturalcrit/styles/tooltip.less
View File

@@ -1,7 +1,7 @@
@tooltipColor : #383838;
@arrowSize : 6px;
@arrowPosition : 18px;
@tooltipColor : #383838;
@arrowSize : 6px;
@arrowPosition : 18px;
[data-tooltip]{
.tooltip(attr(data-tooltip));
}
@@ -17,113 +17,102 @@
[data-tooltip-right]{
.tooltipRight(attr(data-tooltip-right));
}
.tooltip(@content){
.tooltipBottom(@content);
}
.tooltipTop(@content){
.tooltipBase(@content);
&:before {
margin-bottom: -@arrowSize * 2;
border-top-color: @tooltipColor;
margin-bottom : -@arrowSize * 2;
border-top-color : @tooltipColor;
}
&:after{ margin-left: -18px; }
&:before, &:after {
bottom: 100%;
left: 50%; }
&:before, &:after{
bottom : 100%;
left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateY(-(@arrowSize + 2)));
}
}
.tooltipBottom(@content){
.tooltipBase(@content);
&:before {
margin-top: -@arrowSize * 2;
border-bottom-color: @tooltipColor;
margin-top : -@arrowSize * 2;
border-bottom-color : @tooltipColor;
}
&:after{ margin-left: -18px; }
&:before, &:after {
top: 100%;
left: 50%; }
&:before, &:after{
top : 100%;
left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateY(@arrowSize + 2));
}
}
.tooltipLeft(@content){
.tooltipBase(@content);
&:before {
margin-right: -@arrowSize * 2;
margin-bottom: -@arrowSize;
border-left-color: @tooltipColor;
margin-right : -@arrowSize * 2;
margin-bottom : -@arrowSize;
border-left-color : @tooltipColor;
}
&:after{ margin-bottom: -14px;}
&:before, &:after {
right: 100%;
bottom: 50%; }
right : 100%;
bottom : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateX(-(@arrowSize + 2)));
}
}
.tooltipRight(@content){
.tooltipBase(@content);
&:before {
margin-left: -@arrowSize * 2;
margin-bottom: -@arrowSize;
border-right-color: @tooltipColor;
margin-bottom : -@arrowSize;
margin-left : -@arrowSize * 2;
border-right-color : @tooltipColor;
}
&:after{ margin-bottom: -14px;}
&:before, &:after {
left: 100%;
bottom: 50%; }
bottom : 50%;
left : 100%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateX(@arrowSize + 2));
}
}
.tooltipShow(){
}
.tooltipBase(@content){
position: relative;
//position: relative;
&:before, &:after{
.animateAll();
position: absolute;
opacity: 0;
z-index: 1000000;
pointer-events: none;
position : absolute;
z-index : 1000000;
opacity : 0;
pointer-events : none;
}
//Arrow
&:before{
content: '';
background: transparent;
border: @arrowSize solid transparent;
z-index: 1000001;
content : '';
z-index : 1000001;
background : transparent;
border : @arrowSize solid transparent;
}
//Box
&:after{
content: @content;
color: white;
background: @tooltipColor;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
visibility: hidden;
content : @content;
visibility : hidden;
padding : 8px 10px;
background : @tooltipColor;
font-size : 12px;
color : white;
line-height : 12px;
white-space : nowrap;
}
&:hover:before, &:hover:after {
visibility: visible;
opacity: 1;
visibility : visible;
opacity : 1;
}
}