1
  2/**
  3 * Bar (Headers and Footers)
  4 * --------------------------------------------------
  5 */
  6
  7.bar {
  8  @include display-flex();
  9  @include translate3d(0,0,0);
 10  @include user-select(none);
 11  position: absolute;
 12  right: 0;
 13  left: 0;
 14  z-index: $z-index-bar;
 15
 16  @include box-sizing(border-box);
 17  padding: $bar-padding-portrait;
 18
 19  width: 100%;
 20  height: $bar-height;
 21  border-width: 0;
 22  border-style: solid;
 23  border-top: 1px solid transparent;
 24  border-bottom: 1px solid $bar-default-border;
 25
 26  background-color: $bar-default-bg;
 27
 28  /* border-width: 1px will actually create 2 device pixels on retina */
 29  /* this nifty trick sets an actual 1px border on hi-res displays */
 30  background-size: 0;
 31  @media (min--moz-device-pixel-ratio: 1.5),
 32         (-webkit-min-device-pixel-ratio: 1.5),
 33         (min-device-pixel-ratio: 1.5),
 34         (min-resolution: 144dpi),
 35         (min-resolution: 1.5dppx) {
 36    border: none;
 37    background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
 38    background-position: bottom;
 39    background-size: 100% 1px;
 40    background-repeat: no-repeat;
 41  }
 42
 43  &.bar-clear {
 44    border: none;
 45    background: none;
 46    color: #fff;
 47
 48    .button {
 49      color: #fff;
 50    }
 51    .title {
 52      color: #fff;
 53    }
 54  }
 55
 56  &.item-input-inset {
 57    .item-input-wrapper {
 58      margin-top: -1px;
 59
 60      input {
 61        padding-left: 8px;
 62        width: 94%;
 63        height: 28px;
 64        background: transparent;
 65      }
 66    }
 67  }
 68
 69  &.bar-light {
 70    @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
 71    &.bar-footer{
 72      background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
 73    }
 74  }
 75  &.bar-stable {
 76    @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
 77    &.bar-footer{
 78      background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
 79    }
 80  }
 81  &.bar-positive {
 82    @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
 83    &.bar-footer{
 84      background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
 85    }
 86  }
 87  &.bar-calm {
 88    @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
 89    &.bar-footer{
 90      background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
 91    }
 92  }
 93  &.bar-assertive {
 94    @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
 95    &.bar-footer{
 96      background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
 97    }
 98  }
 99  &.bar-balanced {
100    @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
101    &.bar-footer{
102      background-image: linear-gradient(180deg, $bar-balanced-border, $bar-balanced-border 50%, transparent 50%);
103    }
104  }
105  &.bar-energized {
106    @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
107    &.bar-footer{
108      background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
109    }
110  }
111  &.bar-royal {
112    @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
113    &.bar-footer{
114      background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
115    }
116  }
117  &.bar-dark {
118    @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
119    &.bar-footer{
120      background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
121    }
122  }
123
124  // Title inside of a bar is centered
125  .title {
126    display: block;
127    position: absolute;
128
129    top: 0;
130    right: 0;
131    left: 0;
132    z-index: $z-index-bar-title;
133    overflow: hidden;
134
135    margin: 0 10px;
136
137    min-width: 30px;
138    height: $bar-height - 1;
139
140    text-align: center;
141
142    // Go into ellipsis if too small
143    text-overflow: ellipsis;
144    white-space: nowrap;
145
146    font-size: $bar-title-font-size;
147    font-weight: $headings-font-weight;
148
149    line-height: $bar-height;
150
151    &.title-left {
152      text-align: left;
153    }
154    &.title-right {
155      text-align: right;
156    }
157  }
158
159  .title a {
160    color: inherit;
161  }
162
163  .button, button {
164    z-index: $z-index-bar-button;
165    padding: 0 $button-bar-button-padding;
166    min-width: initial;
167    min-height: $button-bar-button-height - 1;
168    font-weight: 400;
169    font-size: $button-bar-button-font-size;
170    line-height: $button-bar-button-height;
171
172    &.button-icon:before,
173    .icon:before,
174    &.icon:before,
175    &.icon-left:before,
176    &.icon-right:before {
177      padding-right: 2px;
178      padding-left: 2px;
179      font-size: $button-bar-button-icon-size;
180      line-height: $button-bar-button-height;
181    }
182
183    &.button-icon {
184      font-size: $bar-title-font-size;
185      .icon:before,
186      &:before,
187      &.icon-left:before,
188      &.icon-right:before {
189        vertical-align: top;
190        font-size: $button-large-icon-size;
191        line-height: $button-bar-button-height;
192      }
193    }
194    &.button-clear {
195      padding-right: 2px;
196      padding-left: 2px;
197      font-weight: 300;
198      font-size: $bar-title-font-size;
199
200      .icon:before,
201      &.icon:before,
202      &.icon-left:before,
203      &.icon-right:before {
204        font-size: $button-large-icon-size;
205        line-height: $button-bar-button-height;
206      }
207    }
208
209    &.back-button {
210      display: block;
211      margin-right: 5px;
212      padding: 0;
213      white-space: nowrap;
214      font-weight: 400;
215    }
216
217    &.back-button.active,
218    &.back-button.activated {
219      opacity: 0.2;
220    }
221  }
222
223  .button-bar > .button,
224  .buttons > .button {
225    min-height: $button-bar-button-height - 1;
226    line-height: $button-bar-button-height;
227  }
228
229  .button-bar + .button,
230  .button + .button-bar {
231    margin-left: 5px;
232  }
233
234  // Android 4.4 messes with the display property
235  .buttons,
236  .buttons.primary-buttons,
237  .buttons.secondary-buttons {
238    display: inherit;
239  }
240  .buttons span {
241    display: inline-block;
242  }
243  .buttons-left span {
244    margin-right: 5px;
245    display: inherit;
246  }
247  .buttons-right span {
248    margin-left: 5px;
249    display: inherit;
250  }
251
252  // Place the last button in a bar on the right of the bar
253  .title + .button:last-child,
254  > .button + .button:last-child,
255  > .button.pull-right,
256  .buttons.pull-right,
257  .title + .buttons {
258    position: absolute;
259    top: 5px;
260    right: 5px;
261    bottom: 5px;
262  }
263
264}
265
266.platform-android {
267
268  .nav-bar-has-subheader .bar {
269    background-image: none;
270  }
271
272  .bar {
273
274    .back-button .icon:before {
275      font-size: 24px;
276    }
277
278    .title {
279      font-size: 19px;
280      line-height: $bar-height;
281    }
282  }
283
284}
285
286// Default styles for buttons inside of styled bars
287.bar-light {
288  .button {
289    @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
290    @include button-clear($bar-light-text, $bar-title-font-size);
291  }
292}
293.bar-stable {
294  .button {
295    @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
296    @include button-clear($bar-stable-text, $bar-title-font-size);
297  }
298}
299.bar-positive {
300  .button {
301    @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
302    @include button-clear(#fff, $bar-title-font-size);
303  }
304}
305.bar-calm {
306  .button {
307    @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
308    @include button-clear(#fff, $bar-title-font-size);
309  }
310}
311.bar-assertive {
312  .button {
313    @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
314    @include button-clear(#fff, $bar-title-font-size);
315  }
316}
317.bar-balanced {
318  .button {
319    @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
320    @include button-clear(#fff, $bar-title-font-size);
321  }
322}
323.bar-energized {
324  .button {
325    @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
326    @include button-clear(#fff, $bar-title-font-size);
327  }
328}
329.bar-royal {
330  .button {
331    @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
332    @include button-clear(#fff, $bar-title-font-size);
333  }
334}
335.bar-dark {
336  .button {
337    @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
338    @include button-clear(#fff, $bar-title-font-size);
339  }
340}
341
342// Header at top
343.bar-header {
344  top: 0;
345  border-top-width: 0;
346  border-bottom-width: 1px;
347  &.has-tabs-top{
348    border-bottom-width: 0px;
349    background-image: none;
350  }
351}
352.tabs-top .bar-header{
353  border-bottom-width: 0px;
354  background-image: none;
355}
356
357// Footer at bottom
358.bar-footer {
359  bottom: 0;
360  border-top-width: 1px;
361  border-bottom-width: 0;
362  background-position: top;
363
364  height: $bar-footer-height;
365
366  &.item-input-inset {
367    position: absolute;
368  }
369
370  .title {
371    height: $bar-footer-height - 1;
372    line-height: $bar-footer-height;
373  }
374}
375
376// Don't render padding if the bar is just for tabs
377.bar-tabs {
378  padding: 0;
379}
380
381.bar-subheader {
382  top: $bar-height;
383
384  height: $bar-subheader-height;
385
386  .title {
387    height: $bar-subheader-height - 1;
388    line-height: $bar-subheader-height;
389  }
390}
391.bar-subfooter {
392  bottom: $bar-footer-height;
393
394  height: $bar-subfooter-height;
395
396  .title {
397    height: $bar-subfooter-height - 1;
398    line-height: $bar-subfooter-height;
399  }
400}
401
402.nav-bar-block {
403  position: absolute;
404  top: 0;
405  right: 0;
406  left: 0;
407  z-index: $z-index-bar;
408}
409
410.bar .back-button.hide,
411.bar .buttons .hide {
412  display: none;
413}
414
415.nav-bar-tabs-top .bar {
416  background-image: none;
417}