mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-10 07:02:39 +00:00
Newlines
This commit is contained in:
Scott Tolksdorf
@@ -1,70 +1,70 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
|
||||
|
||||
var Nav = {
|
||||
base : React.createClass({
|
||||
render : function(){
|
||||
return <nav>
|
||||
<div className='navContent'>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}),
|
||||
logo : function(){
|
||||
return <a className='navLogo' href="/">
|
||||
<NaturalCritIcon />
|
||||
<span className='name'>
|
||||
Natural<span className='crit'>Crit</span>
|
||||
</span>
|
||||
</a>;
|
||||
},
|
||||
|
||||
section : React.createClass({
|
||||
render : function(){
|
||||
return <div className='navSection'>
|
||||
{this.props.children}
|
||||
</div>
|
||||
}
|
||||
}),
|
||||
|
||||
item : React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
icon : null,
|
||||
href : null,
|
||||
newTab : false,
|
||||
onClick : function(){},
|
||||
color : null
|
||||
};
|
||||
},
|
||||
handleClick : function(){
|
||||
this.props.onClick();
|
||||
},
|
||||
render : function(){
|
||||
var classes = cx('navItem', this.props.color, this.props.className);
|
||||
|
||||
var icon;
|
||||
if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
|
||||
|
||||
if(this.props.href){
|
||||
return <a href={this.props.href} className={classes} target={this.props.newTab ? '_blank' : '_self'}>
|
||||
{this.props.children}
|
||||
{icon}
|
||||
</a>
|
||||
}else{
|
||||
return <div className={classes} onClick={this.handleClick}>
|
||||
{this.props.children}
|
||||
{icon}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
};
|
||||
|
||||
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
|
||||
|
||||
var Nav = {
|
||||
base : React.createClass({
|
||||
render : function(){
|
||||
return <nav>
|
||||
<div className='navContent'>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}),
|
||||
logo : function(){
|
||||
return <a className='navLogo' href="/">
|
||||
<NaturalCritIcon />
|
||||
<span className='name'>
|
||||
Natural<span className='crit'>Crit</span>
|
||||
</span>
|
||||
</a>;
|
||||
},
|
||||
|
||||
section : React.createClass({
|
||||
render : function(){
|
||||
return <div className='navSection'>
|
||||
{this.props.children}
|
||||
</div>
|
||||
}
|
||||
}),
|
||||
|
||||
item : React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
icon : null,
|
||||
href : null,
|
||||
newTab : false,
|
||||
onClick : function(){},
|
||||
color : null
|
||||
};
|
||||
},
|
||||
handleClick : function(){
|
||||
this.props.onClick();
|
||||
},
|
||||
render : function(){
|
||||
var classes = cx('navItem', this.props.color, this.props.className);
|
||||
|
||||
var icon;
|
||||
if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
|
||||
|
||||
if(this.props.href){
|
||||
return <a href={this.props.href} className={classes} target={this.props.newTab ? '_blank' : '_self'}>
|
||||
{this.props.children}
|
||||
{icon}
|
||||
</a>
|
||||
}else{
|
||||
return <div className={classes} onClick={this.handleClick}>
|
||||
{this.props.children}
|
||||
{icon}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
};
|
||||
|
||||
|
||||
module.exports = Nav;
|
||||
@@ -1,80 +1,80 @@
|
||||
nav{
|
||||
background-color : #333;
|
||||
.navContent{
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
}
|
||||
.navSection{
|
||||
display : flex;
|
||||
align-items : center;
|
||||
}
|
||||
.navLogo{
|
||||
display : block;
|
||||
margin-top : 0px;
|
||||
margin-right : 8px;
|
||||
margin-left : 8px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
&:hover{
|
||||
.name{ color : @orange; }
|
||||
svg{ fill : @orange }
|
||||
}
|
||||
svg{
|
||||
height : 13px;
|
||||
margin-right : 0.2em;
|
||||
cursor : pointer;
|
||||
fill : white;
|
||||
}
|
||||
span.name{
|
||||
font-family : 'CodeLight';
|
||||
font-size : 15px;
|
||||
span.crit{
|
||||
font-family : 'CodeBold';
|
||||
}
|
||||
small{
|
||||
font-family : 'Open Sans';
|
||||
font-size : 0.3em;
|
||||
font-weight : 800;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navItem{
|
||||
.animate(background-color);
|
||||
padding : 8px 12px;
|
||||
cursor : pointer;
|
||||
background-color : #333;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
i{
|
||||
margin-left : 5px;
|
||||
font-size : 13px;
|
||||
}
|
||||
&.tealLight:hover{ background-color : @tealLight };
|
||||
&.teal:hover{ background-color : @teal };
|
||||
&.greenLight:hover{ background-color : @greenLight };
|
||||
&.green:hover{ background-color : @green };
|
||||
&.blueLight:hover{ background-color : @blueLight };
|
||||
&.blue:hover{ background-color : @blue };
|
||||
&.purpleLight:hover{ background-color : @purpleLight };
|
||||
&.purple:hover{ background-color : @purple };
|
||||
&.steelLight:hover{ background-color : @steelLight };
|
||||
&.steel:hover{ background-color : @steel };
|
||||
&.yellowLight:hover{ background-color : @yellowLight };
|
||||
&.yellow:hover{ background-color : @yellow };
|
||||
&.orangeLight:hover{ background-color : @orangeLight };
|
||||
&.orange:hover{ background-color : @orange };
|
||||
&.redLight:hover{ background-color : @redLight };
|
||||
&.red:hover{ background-color : @red };
|
||||
&.silverLight:hover{ background-color : @silverLight };
|
||||
&.silver:hover{ background-color : @silver };
|
||||
&.greyLight:hover{ background-color : @greyLight };
|
||||
&.grey:hover{ background-color : @grey };
|
||||
}
|
||||
.navSection:last-child .navItem{
|
||||
border-left : 1px solid #666;
|
||||
}
|
||||
nav{
|
||||
background-color : #333;
|
||||
.navContent{
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
}
|
||||
.navSection{
|
||||
display : flex;
|
||||
align-items : center;
|
||||
}
|
||||
.navLogo{
|
||||
display : block;
|
||||
margin-top : 0px;
|
||||
margin-right : 8px;
|
||||
margin-left : 8px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
&:hover{
|
||||
.name{ color : @orange; }
|
||||
svg{ fill : @orange }
|
||||
}
|
||||
svg{
|
||||
height : 13px;
|
||||
margin-right : 0.2em;
|
||||
cursor : pointer;
|
||||
fill : white;
|
||||
}
|
||||
span.name{
|
||||
font-family : 'CodeLight';
|
||||
font-size : 15px;
|
||||
span.crit{
|
||||
font-family : 'CodeBold';
|
||||
}
|
||||
small{
|
||||
font-family : 'Open Sans';
|
||||
font-size : 0.3em;
|
||||
font-weight : 800;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navItem{
|
||||
.animate(background-color);
|
||||
padding : 8px 12px;
|
||||
cursor : pointer;
|
||||
background-color : #333;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
i{
|
||||
margin-left : 5px;
|
||||
font-size : 13px;
|
||||
}
|
||||
&.tealLight:hover{ background-color : @tealLight };
|
||||
&.teal:hover{ background-color : @teal };
|
||||
&.greenLight:hover{ background-color : @greenLight };
|
||||
&.green:hover{ background-color : @green };
|
||||
&.blueLight:hover{ background-color : @blueLight };
|
||||
&.blue:hover{ background-color : @blue };
|
||||
&.purpleLight:hover{ background-color : @purpleLight };
|
||||
&.purple:hover{ background-color : @purple };
|
||||
&.steelLight:hover{ background-color : @steelLight };
|
||||
&.steel:hover{ background-color : @steel };
|
||||
&.yellowLight:hover{ background-color : @yellowLight };
|
||||
&.yellow:hover{ background-color : @yellow };
|
||||
&.orangeLight:hover{ background-color : @orangeLight };
|
||||
&.orange:hover{ background-color : @orange };
|
||||
&.redLight:hover{ background-color : @redLight };
|
||||
&.red:hover{ background-color : @red };
|
||||
&.silverLight:hover{ background-color : @silverLight };
|
||||
&.silver:hover{ background-color : @silver };
|
||||
&.greyLight:hover{ background-color : @greyLight };
|
||||
&.grey:hover{ background-color : @grey };
|
||||
}
|
||||
.navSection:last-child .navItem{
|
||||
border-left : 1px solid #666;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user