Skip to content

Commit

Permalink
completed initial styling, rev to 0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Thor Schueler committed Mar 10, 2017
1 parent 65deae8 commit 49b8498
Show file tree
Hide file tree
Showing 12 changed files with 453 additions and 204 deletions.
39 changes: 19 additions & 20 deletions components/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,31 @@ import { ConfigService } from '../services/configService';
<global-nav [ShowLeftNavToggle]="ShowLeftNavToggle" [ShowSubscriptions]="ShowSubscriptions" [ShowHero]="ShowHero" [ShowNotifications]="ShowNotifications"></global-nav>
<current-nav [HomeLabel]="Title" [HomeIcon]="AppIcon"></current-nav>
<!-- Main Content -->
<div class="container-fluid">
<div class="container-fluid padding-top">
<router-outlet></router-outlet>
</div>
</div>
<app-footer [Copyright]="Copyright" [Version]="Version" [VersionNotes]="ReleaseNotes" ></app-footer>
</div>
`,
styles: [
".app-container { min-height: 100%; position: relative; padding-bottom: 60px; }",
".app-container .content-container { margin-right: 0; margin-left: 0; }",
".container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header { margin-left: -15px; margin-right: -15px; }",
".page-title { font-family: 'Roboto Condensed', sans-serif;margin-left: -10px;margin-right: -10px; padding: 15px 10px; margin-bottom: 0px; height: auto; }",
".page-title .title { font-size: 2em; }",
".page-title .page-action {float: right;height: 40px; line-height: 40px; vertical-align: middle; }",
".sub-title { font-family: 'Roboto Condensed', sans-serif; }",
".sub-title > * { display: inline-block; }",
".sub-title h3 { margin-right: 10px; }",
".sub-title .description { font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; }",
".sub-title .action .btn { padding: 0 0.5em; }",
"@media (max-width: 768px) {",
" .body-content { padding-top: 50px; }",
" .app-container .content-container .side-body { margin-left: 10px; }",
" .app-container.expanded .side-body { margin-left: 10px; }",
"}"

],
styles: [`
.app-container { min-height: 100%; position: relative; padding-bottom: 60px; }
.app-container .content-container { margin-right: 0; margin-left: 0; }
.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header { margin-left: -15px; margin-right: -15px; }
.page-title { font-family: 'Roboto Condensed', sans-serif;margin-left: -10px;margin-right: -10px; padding: 15px 10px; margin-bottom: 0px; height: auto; }
.page-title .title { font-size: 2em; }
.page-title .page-action {float: right;height: 40px; line-height: 40px; vertical-align: middle; }
.sub-title { font-family: 'Roboto Condensed', sans-serif; }
.sub-title > * { display: inline-block; }
.sub-title h3 { margin-right: 10px; }
.sub-title .description { font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; }
.sub-title .action .btn { padding: 0 0.5em; }
@media (max-width: 768px) {
.body-content { padding-top: 50px; }
.app-container /deep/ .content-container .side-body { margin-left: 10px; }
.app-container.expanded /deep/ .side-body { margin-left: 10px; }
}
`],
})
export class AppComponent {
private _config: ConfigService;
Expand Down
14 changes: 7 additions & 7 deletions components/breadcrumb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import 'rxjs/add/operator/filter';
<span *ngIf="(node.Url == null || node.Url == '')" id={{node.Id}}>{{node.Title}}</span>
</li>
</ol>`,
styles: [
":host { float: left }",
"* { color: white !Important ;}",
".navbar-breadcrumb { margin-left: 0px; background-color: transparent; padding: 0px; }",
".navbar-breadcrumb > li { height: 60px; line-height: 60px; vertical-align: middle; font-family: 'Roboto Condensed', sans-serif; font-size: 1.5em; }"

]
styles: [`
:host { float: left }
* { color: white !Important ;}
.breadcrumb.navbar-breadcrumb { margin-bottom: 0px; }
.navbar-breadcrumb { margin-left: 0px; background-color: transparent; padding: 0px; }
.navbar-breadcrumb > li { height: 60px; line-height: 60px; vertical-align: middle; font-family: 'Roboto Condensed', sans-serif; font-size: 1.5em; }
`]
})
export class Breadcrumb {
private _breadcrumbService: BreadcrumbService;
Expand Down
94 changes: 53 additions & 41 deletions components/currentNav.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,66 @@
<div class="navbar-header">
<a class="navbar-brand" routerLink="/">
<div class="icon fa {{HomeIcon}}"></div>
<div class="title">{{HomeLabel}}</div>
<div class="title {{HomeLabel.length > 25 ? 'multiline' : ''}}">{{HomeLabel}}</div>
</a>
</div>
<navbar-vertical></navbar-vertical>
</div>
</nav>
</div>
`,
styles: [
".navbar { z-index: 10001; padding-left: 60px; -webkit-transition: all 0.25s; transition: all 0.25s; }",
".navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { height: 60px; line-height: 60px; margin-left: 0px; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; padding: 0; font-size: 1.5em; }",
".side-menu {overflow-y: auto;z-index: 100000; position: fixed; width: 60px;height: 100%; -webkit-transition: all 0.25s; transition: all 0.25s; }",
".side-menu .navbar-header {width: 100%; border-bottom: 0px solid #e7e7e7; }",
".side-menu .navbar-header .navbar-brand { width: 455px;line-height: 60px; height: 60px;padding: 0; width: 100%;overflow: hidden; font-family: 'Roboto Condensed', sans-serif; }",
".side-menu .navbar-header .navbar-brand .icon { width: 60px; text-align: center; display: inline-block; }",
".side-menu .navbar-header .navbar-brand .title { margin-left: -10px; display: none; }",
".side-menu .navbar-header .navbar-expand-toggle { position: absolute; right: 0; width: 60px; height: 60px; background-color: transparent; border: 0px; -moz-transition: all 0.25s linear;-webkit-transition: all 0.25s linear; transition: all 0.25s linear;opacity: 0.75; }",
".side-menu .navbar { border: none; padding-left: 0px; }",
".side-menu .navbar-nav li { display: block; width: 100%; overflow: hidden; }",
".side-menu .navbar-nav li a { font-family: 'Roboto Condensed', sans-serif; padding: 0 10px 0 10px; height: 46px; line-height: 46px; display: block; white-space: nowrap; }",
".side-menu .navbar-nav li a .icon { margin-left: 0px; width: 38px; text-align: center; font-size: 1.1em; display: inline-block; }",
".side-menu .navbar-nav li a .title { width: 0px; white-space: nowrap; padding-left: 6px; display: none; }",
".side-menu .navbar-nav li.dropdown { border: 0; margin-bottom: 0; border-radius: 0; box-shadow: none; }",
".side-menu .navbar-nav li.dropdown ul li a { height: 44px;line-height: 44px; vertical-align: middle; padding: 0em 1.2em; }",
".side-menu .navbar-nav li.dropdown > a:after { content: ''; position: absolute; right: 1em; }",
".side-menu .navbar-nav .panel-collapse.in { display: none; }",
".side-menu:hover { width: 250px; }",
".side-menu:hover .navbar-header .navbar-brand .title { display: inline-block; }",
".side-menu:hover .navbar-nav li a .title { width: 192px; display: inline-block; }",
".side-menu:hover .navbar-nav li.dropdown > a:after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 1em; }",
".side-menu:hover .panel-collapse.in { display: block; }",
":host-context(.app-container.expanded .content-container) .side-menu { width: 250px; }",
":host-context(.app-container.expanded .content-container) .side-menu .navbar-header .navbar-brand .title { display: inline-block; }",
":host-context(.app-container.expanded .content-container) .side-menu .navbar-nav li a .title { display: inline-block; }",
":host-context(.app-container.expanded .content-container) .side-menu .navbar-nav li .panel-collapse.in { display: block; }",
":host-context(.app-container.expanded .content-container) .side-menu .navbar-nav li.dropdown > a:after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 1em; }",
"@media (max-width: 768px) {",
" .navbar { padding-left: 0; }",
" .navbar .navbar-header { width: auto; display: block; }",
" .navbar .navbar-nav { width: auto; margin: 0; }",
" .navbar .navbar-nav > li { display: inline-block; }",
" .navbar .navbar-right { position: absolute;top: 0;right: -100%;height: 100%;width: 100%;-moz-transition: all 0.25s linear;-webkit-transition: all 0.25s linear; transition: all 0.25s linear; }",
" .navbar .navbar-right .open .dropdown-menu { position: absolute; }",
" .navbar .navbar-right.expanded { right: 0; }",
" :host-context(.app-container .content-container) .side-menu { margin-left: -250px; width: 0px; }",
" :host-context(.app-container.expanded) .side-menu { margin-left: 0px; width: 250px; }",
"}"
]
styles: [`
.navbar { z-index: 10001; padding-left: 60px; -webkit-transition: all 0.25s; transition: all 0.25s; }
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { height: 60px; line-height: 60px; margin-left: 0px; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; padding: 0; font-size: 1.5em; }
.side-menu {overflow-y: auto;z-index: 100000; position: fixed; width: 60px;height: 100%; -webkit-transition: all 0.25s; transition: all 0.25s; }
.side-menu .navbar-header {width: 100%; border-bottom: 0px solid #e7e7e7; background-color: #22A7F0; color: #fff; margin-bottom: 4px; }
.side-menu .navbar-header .navbar-brand { width: 455px;line-height: 60px; height: 60px;padding: 0; width: 100%;overflow: hidden; font-family: 'Roboto Condensed', sans-serif; }
.side-menu .navbar-header .navbar-brand .icon { width: 60px; text-align: center; display: inline-block; }
.side-menu .navbar-header .navbar-brand .title { margin-left: -10px; display: none; }
.side-menu .navbar-header .navbar-expand-toggle { position: absolute; right: 0; width: 60px; height: 60px; background-color: transparent; border: 0px; -moz-transition: all 0.25s linear;-webkit-transition: all 0.25s linear; transition: all 0.25s linear;opacity: 0.75; }
.side-menu .navbar { border: none; padding-left: 0px; border-radius: 0px; }
.side-menu /deep/ .navbar-nav { width: 100% }
.side-menu /deep/ .navbar-nav li { display: block; width: 100%; overflow: hidden; }
.side-menu /deep/ .navbar-nav li a { font-family: 'Roboto Condensed', sans-serif; padding: 0 10px 0 10px; height: 46px; line-height: 46px; display: block; white-space: nowrap; }
.side-menu /deep/ .navbar-nav li a .icon { margin-left: 0px; width: 38px; text-align: center; font-size: 1.1em; display: inline-block; }
.side-menu /deep/ .navbar-nav li a .title { width: 0px; white-space: nowrap; padding-left: 6px; display: none; }
.side-menu /deep/ .navbar-nav li a .title.multiline {line-height: 14pt; padding-bottom: 13px; padding-top: 13px; }
.side-menu /deep/ .navbar-nav li.dropdown { border: 0; margin-bottom: 0; border-radius: 0; box-shadow: none; background-color: transparent; }
.side-menu /deep/ .navbar-nav li.dropdown ul li a { height: 44px;line-height: 44px; vertical-align: middle; padding: 0em 1.2em; }
.side-menu /deep/ .navbar-nav li.dropdown > a:after { content: ""; position: absolute; right: 1em; }
.side-menu /deep/ .navbar-nav .panel-collapse.in { display: none; }
.side-menu:hover { width: 250px; }
.side-menu:hover .navbar-header .navbar-brand /deep/ .title { display: inline-block; }
.side-menu:hover /deep/ .navbar-nav li a .title { width: 192px; display: inline-block; }
.side-menu:hover /deep/ .navbar-nav li.dropdown > a:after { font-family: FontAwesome; content: "\\f107"; position: absolute; right: 1em; }
.side-menu:hover /deep/ .panel-collapse.in { display: block; }
.side-menu.sidebar-inverse { background-color: #353d47; box-shadow: 1px 1px 2px rgba(0,0,0,0.08); color: #fff; }
.side-menu.sidebar-inverse .navbar { background-color: inherit; border-bottom: 0px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.side-menu.sidebar-inverse .navbar /deep/ li { border-left: 0; }
.side-menu.sidebar-inverse .navbar /deep/ li > a { color: #fff; }
.side-menu.sidebar-inverse .navbar /deep/ li.active > a { color: #353d47; border-left: 3px solid #22A7F0; border-right: 0px solid #22A7F0; background-color: #FFF; }
.side-menu.sidebar-inverse .navbar /deep/ li.active > a .icon { margin-left: -3px; }
.side-menu.sidebar-inverse .navbar /deep/ li:hover > a { color: #22A7F0; }
.side-menu.sidebar-inverse .navbar /deep/ li.dropdown > .panel-collapse { background-color: rgba(0, 0, 0, 0.1); }
.side-menu.sidebar-inverse .navbar /deep/ li.dropdown .panel-body { padding: 0 7px; }
.side-menu.sidebar-inverse .navbar-header .navbar-brand { color: #fff; }
:host-context(.app-container.expanded .content-container) .side-menu { width: 250px; }
:host-context(.app-container.expanded .content-container) .side-menu .navbar-header .navbar-brand /deep/ .title { display: inline-block; }
:host-context(.app-container.expanded .content-container) .side-menu /deep/ .navbar-nav li a .title { display: inline-block; }
:host-context(.app-container.expanded .content-container) .side-menu /deep/ .navbar-nav li .panel-collapse.in { display: block; }
:host-context(.app-container.expanded .content-container) .side-menu /deep/ .navbar-nav li.dropdown > a:after { font-family: FontAwesome; content: "\\f107"; position: absolute; right: 1em; }
@media (max-width: 768px) {
.navbar { padding-left: 0; }
.navbar .navbar-header { width: auto; display: block; }
.navbar /deep/ .navbar-nav { width: auto; margin: 0; }
.navbar /deep/ .navbar-nav li { display: inline-block; }
.navbar .navbar-right { position: absolute;top: 0;right: -100%;height: 100%;width: 100%;-moz-transition: all 0.25s linear;-webkit-transition: all 0.25s linear; transition: all 0.25s linear; }
.navbar .navbar-right /deep/ .open .dropdown-menu { position: absolute; }
.navbar .navbar-right.expanded { right: 0; }
:host-context(.app-container .content-container) .side-menu { margin-left: -250px; width: 0px; }
:host-context(.app-container.expanded) .side-menu { margin-left: 0px; width: 250px; }
}
`]
})
export class CurrentNav {
private _homeLabel: string = "Home";
Expand Down
23 changes: 12 additions & 11 deletions components/footer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,18 @@
</div>
</footer>
`,
styles: [
":host .fa, :host .wrapper { color: #aaa; }",
":host .fa {padding-left: 10px; }",
".app-footer { display: block; position: absolute;bottom: 0;right: 0;left: 65px;-webkit-transition: all 0.25s;transition: all 0.25s;font-size: 12px;font-family: 'Roboto Condensed', sans-serif; }",
".app-footer .wrapper {padding: 10px 35px;padding-left: 25px;height: 50px;line-height: 50px; vertical-align: middle; }",
":host-context(.app-container.expanded) .app-footer { left: 250px; }",
":host-context(.app-container.expanded) .app-footer .wrapper { padding-left: 25px; } ",
"@media (max-width: 768px) {",
" :host-context(.app-container) .app-footer .wrapper, :host-context(.app-container.expanded) .app-footer .wrapper { padding-left: 25px; } ",
"}"
]
styles: [`
:host .fa, :host .wrapper { color: #aaa; }
:host .fa {padding-left: 10px; }
.app-footer { display: block; position: absolute;bottom: 0;right: 0;left: 65px;-webkit-transition: all 0.25s;transition: all 0.25s;font-size: 12px;font-family: 'Roboto Condensed', sans-serif; }
.app-footer .wrapper {padding: 10px 35px;padding-left: 25px;height: 50px;line-height: 50px; vertical-align: middle; }
:host-context(.app-container.expanded) .app-footer { left: 250px; }
:host-context(.app-container.expanded) .app-footer .wrapper { padding-left: 25px; }
@media (max-width: 768px) {
.app-footer { left: 10px; }
:host-context(.app-container) .app-footer .wrapper, :host-context(.app-container.expanded) .app-footer .wrapper { padding-left: 15px; }
}
`]
})
export class Footer {
private _copyright: string = "Copyright © 2017, Infusion.";
Expand Down
Loading

0 comments on commit 49b8498

Please sign in to comment.