Merge pull request #10 from carljbowman/navigation

Navigation

src/components/forms/button.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+var classNames = require('classnames');
+
+require('./button.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        
+    },
+    render: function () {
+        var classes = classNames(
+            'button',
+            this.props.className
+        );
+        return (
+            <button {... this.props} className={classes} >{this.props.children}</button>
+        );
+    }
+});

src/components/forms/button.scss

@@ -0,0 +1,27 @@
+.button {
+    display: inline-block;
+    font-size: .8rem;
+    padding: .75em 1em;
+    margin: .5em 0;
+    background-color: #24a3ec;
+    color: white;
+    font-weight: bold;
+    border-radius: 5px;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    border: none;
+    
+    &.white {
+        background-color: white;
+        border-top: 1px inset rgba(0, 0, 0, 0.1);
+        color: #24a3ec;
+    }
+    
+    &:hover {
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    }
+    
+    &:active {
+        box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
+    }
+}

src/components/forms/input.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+var classNames = require('classnames');
+
+require('./input.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        
+    },
+    render: function () {
+        var classes = classNames(
+            'input',
+            this.props.className
+        );
+        return (
+            <input {... this.props} className={classes} />
+        );
+    }
+});

src/components/forms/input.scss

@@ -0,0 +1,28 @@
+.input {
+    color:black;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    font-size: .8rem;
+    padding: .75em 1em;
+    margin: .5em 0;
+    background-color: #f7f7f7;
+    transition:all 1s ease;
+    
+    &:focus {
+        background-color: #d3eaf8;
+        outline:none;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        transition:all 1s ease;
+    }
+    
+    &.fail {
+        border: 1px solid #eab012;
+        background-color: #fff7df;
+    }
+    
+    &.pass {
+        border: 1px solid #55db58;
+        background-color: #eafdea;
+    }
+}
+

src/components/login/login.jsx

@@ -1,4 +1,6 @@
 var React = require('react');
+var Input = require('../forms/input.jsx');
+var Button = require('../forms/button.jsx');
 
 require('./login.scss');
 
@@ -15,11 +17,11 @@ module.exports = React.createClass({
             <div className="login">
                 <form onSubmit={this.handleSubmit}>
                     <label htmlFor="username">Username</label>
-                    <input type="text" name="username" maxLength="30" />
+                    <Input type="text" name="username" maxLength="30" />
                     <label htmlFor="password">Password</label>
-                    <input type="password" name="password" />
+                    <Input type="password" name="password" />
-                    <button className="submit-button" type="submit">Sign in</button>
+                    <Button className="submit-button white" type="submit">Sign in</Button>
-                    <a href="/accounts/password_reset/">Forgot password?</a>
+                    <a className="right" href="/accounts/password_reset/">Forgot password?</a>
                 </form>
             </div>
         );

src/components/login/login.scss

@@ -1,7 +1,20 @@
 .login {
-    padding: 14px 9px;
+    padding: 10px;
+    
+    label {
+        padding-top: 5px;
+        font-weight: bold;
+    }
 
     .submit-button {
-        margin-right: 3px;
+        margin-top: 5px;
+    }
+    
+    a {
+        margin-top: 15px;
+    }
+    
+    a:hover {
+        background-color: transparent !important;
     }
 }

src/components/navigation/_colors.scss

@@ -1,3 +1,3 @@
-$base-background-color: #0f8bc0;
+$base-background-color: #2aa3ef;
-$active-background-color: rgb(1, 96, 135);
+$active-background-color: rgba(0, 0, 0, 0.1);
 $border-color: rgb(20, 154, 203);

src/components/navigation/dropdown.scss

@@ -3,15 +3,16 @@
 .dropdown {
     position: absolute;
     right: 0;
-    min-width: 160px;
+    min-width: 240px;
-    max-width: 220px;
+    max-width: 260px;
     background-color: $base-background-color;
-    overflow: hidden;
+    overflow: visible;
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 0 0 5px 5px;
-    box-shadow: inset 0 1px 1px rgba(100,100,100,.25),0 1px 1px rgba(0,0,0,.25);
+    padding: 10px;
     color: white;
     font-weight: normal;
     font-size: 0.8125rem;
+    border: 1px solid $active-background-color;
 
     display: none;
     &.open {
@@ -20,12 +21,13 @@
 
     a {
         color: white;
+        background-color: transparent;
     }
 
     input {
         // 100% minus border and padding
-        width: calc(100% - 2px - 8px);
+        width: calc(100% - 30px);
-        margin-bottom: 9px;
+        margin-bottom: 12px;
     }
 
     label {
@@ -47,28 +49,33 @@
             padding: 0 10px;
 
             &:hover {
-                background-color: $active-background-color;
+               background-color: $active-background-color;
-                text-decoration: none;
+               text-decoration: none;
             }
         }
     }        
 
     &.with-arrow {
-        $arrow-border-width: 11px;
+        $arrow-border-width: 14px;
-        overflow: visible;
         margin-top: $arrow-border-width;
-        border-radius: 4px;
+        border-radius: 5px;
-        &:before {
+        overflow: visible;
+        &:before {        
             position: absolute;
             display: block;
+            top: -$arrow-border-width/2;
             right: 10%;
-            top: -$arrow-border-width;
+            
-            left: auto;
+            height: $arrow-border-width;
-            border-color: transparent;
+            width: $arrow-border-width;
-            border-bottom-color: $base-background-color;
+            content: '';
-            border-style: solid;
+            transform: rotate(45deg);
-            border-width: 0 $arrow-border-width $arrow-border-width $arrow-border-width;
+            
-            content: " ";
+            background-color: $base-background-color;
+            border-top: 1px solid $active-background-color;
+            border-left: 1px solid $active-background-color;
+            border-radius: 5px;
+            
         }
     }
 }

src/components/navigation/navigation.jsx

@@ -1,7 +1,9 @@
 var React = require('react');
 var classNames = require('classnames');
-var Login = require('../login/login.jsx');
+
 var Dropdown = require('./dropdown.jsx');
+var Input = require('../forms/input.jsx');
+var Login = require('../login/login.jsx');
 
 require('./navigation.scss');
 
@@ -54,17 +56,17 @@ module.exports = React.createClass({
 
                     <li className="search">
                         <form action="/search/google_results" method="get">
-                            <input type="submit" value="" />
+                            <Input type="submit" value="" />
-                            <input type="text" placeholder="Search" name="q" />
+                            <Input type="text" placeholder="Search" name="q" />
-                            <input type="hidden" name="date" value="anytime" />
+                            <Input type="hidden" name="date" value="anytime" />
-                            <input type="hidden" name="sort_by" value="datetime_shared" />
+                            <Input type="hidden" name="sort_by" value="datetime_shared" />
                         </form>
                     </li>
                     {this.state.loggedIn ? [
                         <li className="link right messages"><a href="/messages/" title="Messages">Messages</a></li>,
                         <li className="link right mystuff"><a href="/mystuff/" title="My Stuff">My Stuff</a></li>,
                         <li className="link right account-nav">
-                            <a href="#" onClick={this.handleClickAccountNav}>
+                            <a className="userInfo" href="#" onClick={this.handleClickAccountNav}>
                                 <img src={this.state.loggedInUser.thumbnail} />
                                 {this.state.loggedInUser.username}
                             </a>

src/components/navigation/navigation.scss

@@ -10,7 +10,7 @@
     background-color: $base-background-color;
     
     /* NOTE: Height should match offset settings in main.scss file */
-    height: 35px;
+    height: 50px;
 
     .inner > ul {
         display: flex;
@@ -18,7 +18,7 @@
         flex-wrap: nowrap;
         justify-content: flex-start;
 
-        height: 35px;
+        height: 50px;
         margin: 0;
         padding: 0;
         list-style: none;
@@ -28,25 +28,27 @@
             align-self: flex-start;
             float: left;
             height: 100%;
-            border-left: 1px solid $border-color;
             position: relative;
         }
 
         .logo {
-            border-left: none;
+            margin-right: 10px;
-
             a {
                 display: block;
-                width: 80px;
+                width: 81px;
-                height: 35px;
+                height: 50px;
-                margin: 4px 6px 0 0;
+                margin: 0px 6px 0 0;
 
                 border: none;
                 background-image: url('/images/logo_sm.png');
                 background-repeat: no-repeat;
+                background-position: center center;
+                background-size: 95%;
+                transition: .15s ease all;
 
                 &:hover {
-                   background-image: url('/images/logo_sm_highlight.png');    
+                   background-size: 100%;
+                   transition: .15s ease all; 
                 }
             }
         }
@@ -54,13 +56,14 @@
         .link {
             > a {
                 display: block;
-                height: 28px;
+                height: 33px;
-                padding: 7px 15px 0 15px;
+                padding: 17px 15px 0px 15px;
                 
                 color: white;
                 text-decoration: none;
-                font-size: 0.95rem;
+                font-size: 0.85rem;
                 white-space: nowrap;
+                font-weight: bold;
             }
 
             > a:hover {
@@ -71,9 +74,11 @@
         .search {
             flex-grow: 3;
             border-right: none;
+            color: white;
+            margin:0px 20px;
 
             form {
-                margin: 6px 0 0 15px;
+                margin: 0;
             }
 
             input {
@@ -81,26 +86,42 @@
                 height: 14px;
                 outline: none;
                 border: none;
+                background-color: $active-background-color;
+                margin-top:5px;
             }
 
             input[type=submit] {
                 position: absolute;
-                width: 30px;
+                width: 40px;
-                height: 22px;
+                height: 40px;
-
+                
-                background-color: white;
+                background-color: transparent;
+                
                 background-image: url('/images/nav-search-glass.png');
+                background-size: 14px 14px;
                 background-repeat: no-repeat;
-                background-position: center center;
+                background-position: center center;     
-                border-right: 1px solid #efefef;
-                border-radius: 10px 0 0 10px;
             }
 
             input[type=text] {
                 width: calc(100% - 50px);
-                padding-left: 36px;
+                height: 40px;
-                border-radius: 10px;
+                padding: 0;
+                
+                color: white;
+                padding-left: 40px;
+                padding-right:10px;
                 font-size: 0.85em;
+                transition: .15s ease background-color; 
+                
+                &::placeholder {
+                    color:rgba(255, 255, 255, 0.75);
+                }
+                
+                &:focus {
+                    background-color: rgba(0, 0, 0, 0.2);
+                    transition: .15s ease background-color;
+                }
             }
 
             .ie9 input[type=text] {
@@ -112,17 +133,12 @@
             align-self: flex-end;
             float: right;
             margin-left: auto;
-            font-weight: bold;
 
-            &:last-child {
+            a:hover {
-                border-right: 1px solid rgb(20, 154, 203);
+                background-color: $active-background-color;
             }
         }
 
-        .join > a:hover {
-            background-color: #f79231;
-        }
-
         .messages, .mystuff {
             > a {
                 background-repeat: no-repeat;
@@ -154,15 +170,21 @@
         }
 
         .account-nav {
+            .userInfo {
+                    padding-top: 11px;
+                    padding-bottom: 6px;
+                }
+            
             > a {
                 font-weight: normal;
                 font-size: 0.8125rem;
-
+                
                 img {
-                    width: 24px;
+                    width: 30px;
-                    height: 24px;
+                    height: 30px;
-                    margin-right: 5px;
+                    margin-right: 10px;
                     vertical-align: middle;
+                    border-radius: 3px;
                 }
 
                 &:after {

src/main.scss

@@ -51,40 +51,5 @@ a:hover {
     padding: 20px 0;
 
     /* NOTE: Margin should match height in navigation.scss */
-    margin-top: 35px;
+    margin-top: 50px;
-}
-
-/* Forms */
-input {
-    height: 18px;
-    line-height: 18px;
-    display: inline-block;
-    padding: 4px;
-    margin-bottom: 9px;
-    font-size: 13px;
-    color: #555;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-    transition: border linear .2s,box-shadow linear .2s;
-}
-
-button {
-    cursor: pointer;
-    line-height: 30px;
-    border: 1px solid #eee;
-    border-radius: 5px;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-    transition: all .25s ease-in-out;
-    height: 32px;
-    text-shadow: 0 1px #fff;
-    font-weight: normal;
-    color: #666;
-    border-color: #999;
-    display: inline-block;
-    background: linear-gradient(to bottom, #fff, #ccc)
-}
-
-button:hover {
-    background-image: linear-gradient(#e6e6e6,#e6e6e6);
 }

src/views/components/components.jsx

@@ -1,7 +1,10 @@
 var React = require('react');
 
 var Box = require('../../components/box/box.jsx');
+var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
+var Input = require('../../components/forms/input.jsx');
+
 
 require('./components.scss');
 
@@ -9,6 +12,10 @@ var View = React.createClass({
     render: function () {
         return (
             <div className="inner">
+                <h1>Button</h1>
+                <Button>I love button</Button>
+                <h1>Form</h1>
+                <Input type="text" name="test" maxLength="30" />
                 <h1>Box Component</h1>
                 <Box
                     title="Some Title"