diff --git a/src/components/box/box.scss b/src/components/box/box.scss index a48f8688b..d8a4a627d 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -14,7 +14,7 @@ clear: both; overflow: hidden; - background-color: #efefef; + background-color: #efefef; border-radius: 10px 10px 0 0; border-top: 1px solid white; border-bottom: 1px solid #ccc; diff --git a/src/components/forms/button.jsx b/src/components/forms/button.jsx new file mode 100644 index 000000000..78e03e579 --- /dev/null +++ b/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 ( + + ); + } +}); diff --git a/src/components/forms/button.scss b/src/components/forms/button.scss new file mode 100644 index 000000000..4a52e6dde --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx new file mode 100644 index 000000000..dc4a3e4b4 --- /dev/null +++ b/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 ( + + ); + } +}); diff --git a/src/components/forms/input.scss b/src/components/forms/input.scss new file mode 100644 index 000000000..29f941bdb --- /dev/null +++ b/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; + } +} + diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx index 48551d3b7..f2656e876 100644 --- a/src/components/login/login.jsx +++ b/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({
- + - - - Forgot password? + + + Forgot password?
); diff --git a/src/components/login/login.scss b/src/components/login/login.scss index f0c2342ae..58910e568 100644 --- a/src/components/login/login.scss +++ b/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; } } \ No newline at end of file diff --git a/src/components/navigation/_colors.scss b/src/components/navigation/_colors.scss index 4f6923b5d..c2d8aa0e4 100644 --- a/src/components/navigation/_colors.scss +++ b/src/components/navigation/_colors.scss @@ -1,3 +1,3 @@ -$base-background-color: #0f8bc0; -$active-background-color: rgb(1, 96, 135); +$base-background-color: #2aa3ef; +$active-background-color: rgba(0, 0, 0, 0.1); $border-color: rgb(20, 154, 203); diff --git a/src/components/navigation/dropdown.scss b/src/components/navigation/dropdown.scss index 87bfe75f7..db836a037 100644 --- a/src/components/navigation/dropdown.scss +++ b/src/components/navigation/dropdown.scss @@ -3,15 +3,16 @@ .dropdown { position: absolute; right: 0; - min-width: 160px; - max-width: 220px; + min-width: 240px; + max-width: 260px; background-color: $base-background-color; - overflow: hidden; - border-radius: 0px 0px 4px 4px; - box-shadow: inset 0 1px 1px rgba(100,100,100,.25),0 1px 1px rgba(0,0,0,.25); + overflow: visible; + border-radius: 0 0 5px 5px; + 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); - margin-bottom: 9px; + width: calc(100% - 30px); + margin-bottom: 12px; } label { @@ -47,28 +49,33 @@ padding: 0 10px; &:hover { - background-color: $active-background-color; - text-decoration: none; + background-color: $active-background-color; + text-decoration: none; } } } &.with-arrow { - $arrow-border-width: 11px; - overflow: visible; + $arrow-border-width: 14px; margin-top: $arrow-border-width; - border-radius: 4px; - &:before { + border-radius: 5px; + overflow: visible; + &:before { position: absolute; - display: block; - right: 10%; - top: -$arrow-border-width; - left: auto; - border-color: transparent; - border-bottom-color: $base-background-color; - border-style: solid; - border-width: 0 $arrow-border-width $arrow-border-width $arrow-border-width; - content: " "; + display: block; + top: -$arrow-border-width/2; + right: 10%; + + height: $arrow-border-width; + width: $arrow-border-width; + content: ''; + transform: rotate(45deg); + + background-color: $base-background-color; + border-top: 1px solid $active-background-color; + border-left: 1px solid $active-background-color; + border-radius: 5px; + } } } diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx index b9a0f6759..64b8b3320 100644 --- a/src/components/navigation/navigation.jsx +++ b/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({
  • - - - - + + + +
    • {this.state.loggedIn ? [
  • Messages
    • ,
  • My Stuff
    • ,
  • - + {this.state.loggedInUser.username} diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss index 604b812f3..cbbd26aa4 100644 --- a/src/components/navigation/navigation.scss +++ b/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; - height: 35px; - margin: 4px 6px 0 0; + width: 81px; + height: 50px; + 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; - padding: 7px 15px 0 15px; + height: 33px; + 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; - height: 22px; - - background-color: white; + width: 40px; + height: 40px; + + background-color: transparent; + background-image: url('/images/nav-search-glass.png'); + background-size: 14px 14px; background-repeat: no-repeat; - background-position: center center; - border-right: 1px solid #efefef; - border-radius: 10px 0 0 10px; + background-position: center center; } input[type=text] { width: calc(100% - 50px); - padding-left: 36px; - border-radius: 10px; + height: 40px; + 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 { - border-right: 1px solid rgb(20, 154, 203); + a:hover { + 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; - height: 24px; - margin-right: 5px; + width: 30px; + height: 30px; + margin-right: 10px; vertical-align: middle; + border-radius: 3px; } &:after { diff --git a/src/main.scss b/src/main.scss index 793c0dec6..243422caf 100644 --- a/src/main.scss +++ b/src/main.scss @@ -51,24 +51,10 @@ a:hover { padding: 10px 0; /* NOTE: Margin should match height in navigation.scss */ - margin-top: 35px; -} - -/* 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; + margin-top: 50px; } +/* button { cursor: pointer; line-height: 30px; @@ -88,3 +74,5 @@ button { button:hover { background-image: linear-gradient(#e6e6e6,#e6e6e6); } +*/ + diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 3fa834e0e..1e9325b45 100644 --- a/src/views/components/components.jsx +++ b/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 (
    +

    Button

    + +

    Form

    +

    Box Component