mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-20 09:31:30 +00:00
Added tooltip to metadata editor and upped the version of font awesome
This commit is contained in:
Scott Tolksdorf
@@ -1,5 +1,9 @@
|
||||
# changelog
|
||||
|
||||
### Saturday, 14/01/2017 - v2.7.0cont
|
||||
- - Added a new Render Warning overlay. It detects situations where the brew may not be rendering correctly (wrong browser, browser is zoomed in...) and let's the user know
|
||||
|
||||
|
||||
### Sunday, 25/12/2016 - v2.7.0
|
||||
- Switching over to using Vitreum v4
|
||||
- Removed gulp, all tasks are run through npm scripts
|
||||
@@ -11,7 +15,7 @@
|
||||
- Fixed realtime renderer not functioning if loaded with malformed html on load (thanks u/RattiganIV re:247)
|
||||
- Removed a lot of unused files in shared
|
||||
- vitreum v4 now lets me use codemirror as a pure node dependacy
|
||||
- Added a new Render Warning overlay. It detects situations where the brew may not be rendering correctly (wrong browser, browser is zoomed in...) and let's the user know
|
||||
|
||||
|
||||
|
||||
### Saturday, 03/12/2016 - v2.6.0
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
cursor : pointer;
|
||||
line-height : @height;
|
||||
text-align : center;
|
||||
.tooltipLeft("Edit Brew Metadata");
|
||||
&:hover, &.selected{
|
||||
background-color : #999;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ module.exports = function(vitreum){
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
||||
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
|
||||
<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
|
||||
<title>The Homebrewery - NaturalCrit</title>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
.warnings{
|
||||
.renderWarnings{
|
||||
position : fixed;
|
||||
display : inline-block;
|
||||
top : @navbarHeight;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user