Slim look with only scrolling the inner-app-content

[ezra.j.rice]

All,

I have taken the liberty of using Scott's work on a slimmer app look and combined it with my own style to make it so that only the inner-app-content div scrolls. The reason for this is that I have found I want the slim look on all of my apps and I want the app's navigation pane to always be visible even after scrolling through a long page. This also allows the app-actions section to remain as the 'footer' of the app without being sent to the bottom and out of view. I think this gives a cleaner feel to the overall theme of the Tethys Apps. An example implementation of this can be found at https://github.com/ezrajrice/tethys_1.4-chart_examples.git

The highlighted parts are what I added to Scott's slim theme.

Here's the CSS:

/* override tethys core styles */

#app-header .tethys-app-header {

    height: 60px;

}

#app-header .tethys-app-header .toggle-nav {

    margin-top: 10px;

}

#app-header .tethys-app-header .icon-wrapper img {

    height: 50px;

}

#app-header .tethys-app-header .icon-wrapper {

    margin-left: 15px;

    padding: 5px 10px;

}

#app-header .tethys-app-header .app-title-wrapper .app-title {

    padding: 0;

    padding-left: 65px;

}

#app-header .tethys-app-header .exit-button {

    margin-top: 10px;

}

#app-header .tethys-app-header .exit-button a {

    padding: 5px 10px;

}

#app-content-wrapper #app-content {

    height: 100vh;

    padding-top: 60px;

    padding-bottom: 50px;

}

#app-content-wrapper #app-content #app-actions {

    height: 50px;

    padding-top: 5px;

}

#app-content-wrapper #app-content #app-navigation {

    padding-top: 60px;

}

#app-content-wrapper #app-content #inner-app-content {

    overflow-y: auto;

}