Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
305 lines (244 sloc) 9.3 KB
// By default the ionic framework provides variables allowing you to override the heights of headers, subheaders,
// footers and subfooters. Those variables can be found in lib/ionic/scss/_variables.scss
//
// $bar-height: 44px !default;
// $bar-title-font-size: 17px !default;
// ...
// $bar-footer-height: $bar-height !default;
// $bar-subheader-height: $bar-height !default;
// $bar-subfooter-height: $bar-height !default;
//
// Overriding anyone of these variables may suite your needs assuming that you want any of the given components to
// have a consistent height throughout your application.
//
// The implementation below builds upon this allowing you to define small and large bar components as well as the built
// in defaults. You can mix and match the components for any given view without affecting the default behaviour. For
// example, in a particular view you could have a large subheader, a default footer and small subfooter or any
// combination thereof.
//
// View content is displayed between the header and footer components. The content element is positioned absolutely
// and takes into account which bar components are on screen. This is necessary in order to ensure that content
// is clipped in exactly the right place i.e. content will scroll under both header and footer components at the bottom
// and top boundaries of the header and footer bars respectively.
//
// When using <ion-header-bar> and <ion-footer-bar> directives within an <ion-view> element the <ion-content> element
// has 2 classes applied to it, .has-header and .has-footer
//
// <ion-content class="scroll-content ionic-scroll has-header has-footer">
//
// These classes are used to absolutely position the top and bottom of the ion-content element.
//
// .has-header { top: 44px; }
// .has-footer { bottom: 44px; }
//
// |-----------------------|
// | Header 44px |
// |-----------------------|
// | top: 44px |
// | |
// | |
// | |
// | ion-content |
// | |
// | |
// | |
// | bottom: 44px |
// |-----------------------|
// | Footer 44px |
// |-----------------------|
//
// When subheaders and/or subfooters are used you need to add a class(es) to the <ion-content> element so that the
// correct top and bottom values of the element can be calculated.
//
// <ion-content class="has-subheader has-subfooter">
//
// .has-subheader { top: 88px; }
// .has-subfooter { bottom: 88px; }
//
// |-----------------------|
// | Header 44px |
// |-----------------------|
// | Subheader 44px |
// |-----------------------|
// | top: 88px |
// | |
// | ion-content |
// | |
// | bottom: 88px |
// |-----------------------|
// | Subfooter 44px |
// |-----------------------|
// | Footer 44px |
// |-----------------------|
//
// The same convention will be used to allow for custom bar heights and subsequent calculation of content position.
// Note that the tab component also has to be considered. Tabs may positioned at the bottom or top of the application
// view as per style guides for iOS and Android.
// Variables
// ----------------------------------------------------------------------
// Default bar height is 44px
$bar-height-large: 66px;
$bar-height-small: 24px;
$bar-small-font-size: 14px;
// Custom subheader heights
$bar-subheader-height-small: $bar-height-small;
$bar-subheader-height-large: $bar-height-large;
// Custom footer heights
$bar-footer-height-small: $bar-height-small;
$bar-footer-height-large: $bar-height-large;
// Custom subfooter heights
$bar-subfooter-height-small: $bar-height-small;
$bar-subfooter-height-large: $bar-height-large;
// mixins
// ----------------------------------------------------------------------
@mixin bar-title-line-height($height) {
height: $height - 1;
line-height: $height;
}
@mixin set-subheader($height) {
height: $height;
&.has-tabs-top {
top: $bar-height + $tabs-height;
}
&.bar .title {
@include bar-title-line-height($height);
}
}
// Sets the top value of the content element when a subheader is used
@mixin set-content-top-for-subheader($subheader-height) {
top: $bar-height + $subheader-height;
&.has-tabs-top {
top: $bar-height + $tabs-height + $subheader-height;
}
}
// Sets the bottom value of the content element when a footer is used without a subfooter
@mixin set-content-bottom-for-footer($footer-height) {
bottom: $footer-height;
&.has-tabs {
bottom: $tabs-height + $footer-height;
}
&.has-tabs-top {
bottom: $footer-height;
}
}
// Sets the subfooter height and position
@mixin set-subfooter($footer-height, $subfooter-height) {
&.bar-footer {
height: $subfooter-height;
}
&.has-tabs {
bottom: $tabs-height + $footer-height;
}
&.bar .title {
@include bar-title-line-height($subfooter-height);
}
}
// Sets the bottom value of the content element when a footer AND subfooter are used
@mixin set-content-bottom-for-subfooter($footer-height, $subfooter-height) {
bottom: $footer-height + $subfooter-height;
&.has-tabs {
bottom: $tabs-height + $footer-height + $subfooter-height;
}
}
// SUB-HEADERS
// ----------------------------------------------------------------------
.bar-subheader-small {
&.bar .title {
font-size: $bar-small-font-size;
}
@include set-subheader($bar-subfooter-height-small);
}
.has-subheader-small {
@include set-content-top-for-subheader($bar-subfooter-height-small);
}
.bar-subheader-large {
@include set-subheader($bar-subfooter-height-large);
}
.has-subheader-large {
@include set-content-top-for-subheader($bar-subfooter-height-large);
}
// FOOTERS
// ----------------------------------------------------------------------
.bar-footer-small {
&.bar-footer {
height: $bar-footer-height-small;
}
&.bar .title {
@include bar-title-line-height($bar-footer-height-small);
font-size: $bar-small-font-size;
}
}
.has-footer-small {
@include set-content-bottom-for-footer($bar-footer-height-small);
}
.bar-footer-large {
&.bar-footer {
height: $bar-footer-height-large;
}
&.bar .title {
@include bar-title-line-height($bar-footer-height-large);
}
}
.has-footer-large {
@include set-content-bottom-for-footer($bar-footer-height-large);
}
// SUB-FOOTERS
// Assumption is that a subfooter is always used with a footer
// ----------------------------------------------------------------------
.bar-subfooter-small {
@include set-subfooter($bar-height, $bar-footer-height-small);
&.bar .title {
font-size: $bar-small-font-size;
}
}
.has-footer.has-subfooter.has-subfooter-small {
@include set-content-bottom-for-subfooter($bar-height, $bar-subfooter-height-small);
}
.bar-subfooter-large {
@include set-subfooter($bar-height, $bar-subfooter-height-large);
}
.has-footer.has-subfooter.has-subfooter-large {
@include set-content-bottom-for-subfooter($bar-height, $bar-subfooter-height-large);
}
// COMBOS
// Assumption is that a subfooter is always used with a footer
// ----------------------------------------------------------------------
// Small footer, small subfooter
.has-footer-small.bar-subfooter-small.bar-subfooter.bar-footer {
@include set-subfooter($bar-footer-height-small, $bar-subfooter-height-small);
}
.has-subfooter.has-footer-small.has-subfooter-small {
@include set-content-bottom-for-subfooter($bar-footer-height-small, $bar-subfooter-height-small);
}
// Large footer, large subfooter
.has-footer-large.bar-subfooter-large.bar-subfooter.bar-footer {
@include set-subfooter($bar-footer-height-large, $bar-subfooter-height-large);
}
.has-subfooter.has-footer-large.has-subfooter-large {
@include set-content-bottom-for-subfooter($bar-footer-height-large, $bar-subfooter-height-large);
}
// Small footer, default subfooter
.has-footer-small.bar-subfooter.bar-footer {
@include set-subfooter($bar-footer-height-small, $bar-height);
}
.has-subfooter.has-footer-small {
@include set-content-bottom-for-subfooter($bar-footer-height-small, $bar-height);
}
// Large footer, default subfooter
.has-subfooter.has-footer-large {
@include set-content-bottom-for-subfooter($bar-footer-height-large, $bar-height);
}
// Small footer, large subfooter
.has-footer-small.bar-subfooter-large.bar-subfooter.bar-footer {
@include set-subfooter($bar-footer-height-small, $bar-subfooter-height-large);
}
.has-subfooter.has-footer-small.has-subfooter-large {
@include set-content-bottom-for-subfooter($bar-footer-height-small, $bar-subfooter-height-large);
}
// Large footer, small subfooter
.has-footer-large.bar-subfooter-small.bar-subfooter.bar-footer {
@include set-subfooter($bar-footer-height-large, $bar-subfooter-height-small);
}
.has-subfooter.has-footer-large.has-subfooter-small {
@include set-content-bottom-for-subfooter($bar-footer-height-large, $bar-subfooter-height-small);
}
You can’t perform that action at this time.