f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 00:03:15 +00:00
Code Wiki Activity

Getting splatsheet rolling

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-03-31 22:03:34 -04:00
parent 6f4d71083c
commit 312167d96b
17 changed files with 396 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/splatsheet/statusbar/statusbar.jsx Normal file
View File

@@ -0,0 +1,30 @@
var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var Logo = require('naturalCrit/logo/logo.jsx');
var Statusbar = React.createClass({
getDefaultProps: function() {
return {
};
},
render : function(){
return <div className='statusbar'>
<Logo
hoverSlide={true}
/>
<div className='left'>
<a href='/splatsheet' className='toolName'>
The SplatSheet
</a>
</div>
<div className='controls right'>
</div>
</div>
}
});
module.exports = Statusbar;

135
client/splatsheet/statusbar/statusbar.less Normal file
View File

@@ -0,0 +1,135 @@
.statusbar{
position : fixed;
z-index : 1000;
height : 25px;
width : 100%;
background-color : black;
font-size : 24px;
color : white;
line-height : 1.0em;
border-bottom : 1px solid @grey;
.logo{
display : inline-block;
vertical-align : middle;
margin-top : -5px;
margin-right : 20px;
svg{
margin-top : -6px;
}
}
.left{
display : inline-block;
vertical-align : top;
}
.right{
float : right;
}
.toolName{
display : block;
vertical-align : middle;
font-family : CodeBold;
font-size : 16px;
color : white;
line-height : 30px;
text-decoration : none;
small{
font-family : CodeBold;
}
}
.controls{
font-size : 12px;
>*{
display : inline-block;
height : 100%;
padding : 0px 10px;
border-left : 1px solid @grey;
}
.savingStatus{
width : 56px;
color : @grey;
text-align : center;
}
.newButton{
.animate(background-color);
color : white;
text-decoration : none;
&:hover{
background-color : fade(@green, 70%);
}
}
.chromeField{
background-color: @orange;
color : white;
text-decoration : none;
i{
margin-right: 10px;
}
}
.changelogButton{
.animate(background-color);
color : white;
text-decoration : none;
&:hover{
background-color : fade(@purple, 70%);
}
}
.deleteButton{
.animate(background-color);
color : white;
text-decoration : none;
cursor: pointer;
&:hover{
background-color : fade(@red, 70%);
}
}
.shareField{
.animate(background-color);
cursor : pointer;
color : white;
text-decoration : none;
&:hover{
background-color : fade(@teal, 70%);
}
span{
margin-right : 5px;
}
input{
width : 100px;
font-size : 12px;
}
}
.printField{
.animate(background-color);
cursor : pointer;
color : white;
text-decoration : none;
&:hover{
background-color : fade(@orange, 70%);
}
span{
margin-right : 5px;
}
input{
width : 100px;
font-size : 12px;
}
}
.sourceField{
.animate(background-color);
cursor : pointer;
color : white;
text-decoration : none;
&:hover{
background-color : fade(@teal, 70%);
}
span{
margin-right : 5px;
}
input{
width : 100px;
font-size : 12px;
}
}
}
}