Skip to content

Commit

Permalink
Merge pull request #207 from job13er/add-some-styles
Browse files Browse the repository at this point in the history
Add some missing styles
  • Loading branch information
sglanzer authored Apr 11, 2017
2 parents a06fda6 + 7f8d456 commit 57773fe
Show file tree
Hide file tree
Showing 14 changed files with 367 additions and 260 deletions.
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,30 @@ Router.map(function () {
*/
```

### CSS
The following CSS classes are defined by this addon to make it easier to layout a page using `frost-navigation`:

* `frost-application`: This class should be applied to, the parent of the `frost-navigation`
element.
* `frost-application-content`: This class should be applied to the element below the `frost-navigation` element.
It will ensure that that element takes up all the space below the navigation.

```handlebars
<div class='frost-application'>
{{frost-navigation ...}}
<div class='frost-application-content'>
<!-- the rest of your page here -->
</div>
</div>
```

### User menu
An example of a user-menu is defined in the dummy app at `tests/dummy/app/pods/components/user-menu` There are also
a couple classes defined in this addon that will format your own user-menu properly:
* `frost-navigation-user` for the actual user menu button
* `frost-navigation-user-menu` for the popover menu that is expanded when clicking on the above button
* `frost-navigation-user-menu-list` for the `<ul>` that holds the list items of the user menu

## Testing with [ember-hook](https://www.npmjs.com/package/ember-hook)

The navigation component is accessible using ember-hook with the top level hook names, or you can access the internal
Expand Down
72 changes: 72 additions & 0 deletions addon/styles/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
//
// Mixins used for ember-frost-navigation styles
//

@mixin category-styles {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 20px;
transition: background .5s ease;
border-right: 1px solid $frost-color-nav-category-border-right;
cursor: pointer;
user-select: none;

.nav-category-icon {
.frost-icon {
width: 30px;
height: 30px;
margin-right: 10px;
}
}

.nav-category-name {
transition: color .5s ease;
color: $frost-color-grey-6;
font-size: 18px;
font-weight: 300;
}

&:hover {
.nav-category-name {
color: $frost-color-white;
}
}

&.active {
background: $frost-color-nav-category-active-bg;

.nav-category-name {
color: $frost-color-white;
}
}

&.disabled {
color: $frost-color-grey-5;
}
}

@mixin tertiary-button-color ($color) {
.frost-button {
&.tertiary {
color: $color;
}
}
}

@mixin do-not-expand-links {
.frost-link {
.content {
min-width: inherit;
}
}
}

// In some instances, the <a> tag gets a color that we don't want,
// based on browser default styles, so we want to make sure the color
// of the link, and by extension the color on the frost-icon is inherited (ARM 2017-04-03)
@mixin keep-link-icon-colors-inherited {
.frost-link {
color: inherit;
}
}
22 changes: 22 additions & 0 deletions addon/styles/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
//
// Variables used by
//

$frost-color-nav-bar-bg: $frost-color-night-2 !default;
$frost-color-nav-border-left: rgba($frost-color-white, .2) !default;
$frost-color-nav-category-border-right: rgba($frost-color-white, .2) !default;

// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03)
$frost-color-nav-category-active-bg: rgba(39, 36, 37, .5) !default;
$frost-color-nav-column-border: rgba($frost-color-white, .3) !default;

// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03)
$frost-color-nav-modal-bg: rgba(51, 66, 79, .97) !default;
$frost-color-nav-route-focus-bg: rgba(0, 0, 0, .2) !default;
$frost-color-nav-route-active-bg: rgba($frost-color-nav-route-focus-bg, .05) !default;
$frost-color-nav-route-focus-box-shadow: #fff !default;

$frost-navigation-bar-height: 50px !default;
$z-index-application-bar: 3 !default;
$z-index-modal: 2 !default;
$z-index-modal-hidden: -1 !default;
124 changes: 66 additions & 58 deletions addon/styles/addon.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,7 @@
@import 'node_modules/ember-frost-core/addon/styles/frost-theme';
@import 'node_modules/ember-frost-core/addon/styles/frost-app';

$nav-modal-bg: rgba(51, 66, 79, .97);
$nav-column-border: rgba($frost-color-white, .3);
$nav-route-focus-bg: rgba(0, 0, 0, .2);
$nav-route-active-bg: rgba($nav-route-focus-bg, .05);
$nav-route-focus-box-shadow: #fff;
$frost-nav-border-left: rgba($frost-color-white, .2);
$nav-category-border-right: rgba($frost-color-white, .2);
$nav-category-active-bg: rgba(39, 36, 37, .5);

$z-index-application-bar: 3 !default;
$z-index-modal: 2 !default;
$z-index-modal-hidden: -1 !default;

$frost-navigation-bar-height: 50px !default;
$frost-navigation-bar-bg-color: $frost-color-night-2 !default;
@import 'variables';
@import 'mixins';

.frost-application-bar {
display: flex;
Expand All @@ -24,7 +10,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
left: 0;
width: 100%;
height: inherit;
background-color: $frost-navigation-bar-bg-color;
background-color: $frost-color-nav-bar-bg;
z-index: $z-index-application-bar;

.branding {
Expand Down Expand Up @@ -61,6 +47,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
}

.nav-modal {
@include keep-link-icon-colors-inherited;

display: flex;
position: fixed;
top: $frost-navigation-bar-height;
Expand All @@ -73,7 +61,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
padding: 0;
border: 0;
outline: 0;
background: $nav-modal-bg;
background: $frost-color-nav-modal-bg;
overflow-x: hidden;

.liquid-container,
Expand Down Expand Up @@ -101,7 +89,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
padding: 30px;

&+ .nav-column {
border-left: 1px solid $nav-column-border;
border-left: 1px solid $frost-color-nav-column-border;
}
}

Expand Down Expand Up @@ -193,8 +181,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
}

&.active {
background: $nav-route-active-bg;
box-shadow: 0 0 1px $nav-route-focus-box-shadow;
background: $frost-color-nav-route-active-bg;
box-shadow: 0 0 1px $frost-color-nav-route-focus-box-shadow;

.nav-route-name {
color: $frost-color-lgrey-1;
Expand All @@ -207,8 +195,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;

&:focus {
outline: none;
background: $nav-route-focus-bg;
box-shadow: 0 0 6px $nav-route-focus-box-shadow;
background: $frost-color-nav-route-focus-bg;
box-shadow: 0 0 6px $frost-color-nav-route-focus-box-shadow;

.nav-route-name {
color: $frost-color-white;
Expand Down Expand Up @@ -277,59 +265,79 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
flex-direction: row;
height: $frost-navigation-bar-height;

& > div {
&> div {
&:first-of-type {
border-bottom: 1px solid $frost-color-grey-2;
border-left: 1px solid $frost-nav-border-left;
overflow: hidden;

.user {
border-left: 0;
}
border-left: 1px solid $frost-color-nav-border-left;
overflow: inherit; // allows frost-popover for the user drop-down to display
}
}

.nav-category {
@include category-styles;
@include do-not-expand-links;
@include keep-link-icon-colors-inherited;
}

&-user {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 20px;
transition: background .5s ease;
border-right: 1px solid $nav-category-border-right;
cursor: pointer;
user-select: none;
height: 50px;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
border-right: 0;
color: $frost-color-white;
vertical-align: middle;

.nav-category-icon {
.frost-icon {
width: 30px;
height: 30px;
margin-right: 10px;
}
.frost-icon {
width: 35px;
height: 35px;
padding-left: 5px;
}
}

.nav-category-name {
transition: color .5s ease;
color: $frost-color-grey-6;
font-size: 18px;
font-weight: 300;
}
&-user-menu {
padding: 0;
}

&:hover {
.nav-category-name {
color: $frost-color-white;
}
}
&-user-menu-list {
min-width: 200px;
margin: 0;
padding: 0;
list-style: none;

&.active {
background: $nav-category-active-bg;
> li {
@include tertiary-button-color($frost-color-grey-3);
border-top: 1px solid $frost-color-lgrey-1;
color: $frost-color-grey-3;

.nav-category-name {
color: $frost-color-white;
&:first-child {
border-top: 0;
}

&:last-child {
@include tertiary-button-color($frost-color-blue-1);
border-top: 5px solid $frost-color-lgrey-5;
}
}

&.disabled {
color: $frost-color-grey-5;
.frost-button {
width: 100%;
text-align: left;
}
}
}

.frost-application {
display: flex;
flex-direction: column;
height: 100%;

&-content {
position: relative;
flex: 1;
overflow: auto;
}
}
21 changes: 0 additions & 21 deletions blueprints/ember-frost-navigation/index.js

This file was deleted.

12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,15 @@
"ember-computed-decorators": "0.2.2",
"ember-concurrency": "0.7.19",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-elsewhere": "0.4.1",
"ember-engines": "~0.3.4",
"ember-export-application-global": "^1.0.5",
"ember-frost-core": "1.9.6",
"ember-frost-notifier": "4.2.1",
"ember-frost-test": "1.0.1",
"ember-frost-popover": "4.2.5",
"ember-frost-test": "1.0.2",
"ember-hook": "1.4.1",
"ember-load-initializers": "^0.5.1",
"ember-prop-types": "3.10.3",
"ember-prop-types": "3.10.4",
"ember-redux": "^1.0.0",
"ember-resolver": "^2.0.3",
"ember-sinon": "0.6.0",
Expand All @@ -78,7 +79,7 @@
"remark-cli": "^2.0.0",
"remark-lint": "^5.1.0",
"sass-lint": "^1.0.0",
"sinon-chai": "^2.8.0",
"sinon-chai": "^2.9.0",
"typescript": "^2.0.0"
},
"keywords": [
Expand All @@ -90,6 +91,7 @@
"ember-computed-decorators": "^0.2.2",
"ember-cli-htmlbars": "^1.0.1",
"ember-cli-sass": "5.6.0",
"ember-frost-core": "^1.0.0",
"liquid-fire": "0.26.1"
},
"ember-addon": {
Expand All @@ -101,4 +103,4 @@
"pr-bumper": {
"coverage": 96.7
}
}
}
Loading

0 comments on commit 57773fe

Please sign in to comment.