1/**
  2 * Tabs
  3 * --------------------------------------------------
  4 * A navigation bar with any number of tab items supported.
  5 */
  6
  7.tabs {
  8  @include display-flex();
  9  @include flex-direction(horizontal);
 10  @include justify-content(center);
 11  @include translate3d(0,0,0);
 12
 13  @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
 14  @include tab-badge-style($tabs-default-text, $tabs-default-bg);
 15
 16  position: absolute;
 17  bottom: 0;
 18
 19  z-index: $z-index-tabs;
 20
 21  width: 100%;
 22  height: $tabs-height;
 23
 24  border-style: solid;
 25  border-top-width: 1px;
 26
 27  background-size: 0;
 28  line-height: $tabs-height;
 29
 30  @media (min--moz-device-pixel-ratio: 1.5),
 31         (-webkit-min-device-pixel-ratio: 1.5),
 32         (min-device-pixel-ratio: 1.5),
 33         (min-resolution: 144dpi),
 34         (min-resolution: 1.5dppx) {
 35    padding-top: 2px;
 36    border-top: none !important;
 37    border-bottom: none;
 38    background-position: top;
 39    background-size: 100% 1px;
 40    background-repeat: no-repeat;
 41  }
 42
 43}
 44/* Allow parent element of tabs to define color, or just the tab itself */
 45.tabs-light > .tabs,
 46.tabs.tabs-light {
 47  @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
 48  @include tab-badge-style($tabs-light-text, $tabs-light-bg);
 49}
 50.tabs-stable > .tabs,
 51.tabs.tabs-stable {
 52  @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
 53  @include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
 54}
 55.tabs-positive > .tabs,
 56.tabs.tabs-positive {
 57  @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
 58  @include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
 59}
 60.tabs-calm > .tabs,
 61.tabs.tabs-calm {
 62  @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
 63  @include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
 64}
 65.tabs-assertive > .tabs,
 66.tabs.tabs-assertive {
 67  @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
 68  @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
 69}
 70.tabs-balanced > .tabs,
 71.tabs.tabs-balanced {
 72  @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
 73  @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
 74}
 75.tabs-energized > .tabs,
 76.tabs.tabs-energized {
 77  @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
 78  @include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
 79}
 80.tabs-royal > .tabs,
 81.tabs.tabs-royal {
 82  @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
 83  @include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
 84}
 85.tabs-dark > .tabs,
 86.tabs.tabs-dark {
 87  @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
 88  @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
 89}
 90
 91@mixin tabs-striped($style, $color, $background) {
 92  &.#{$style} {
 93    .tabs{
 94      background-color: $background;
 95    }
 96    .tab-item {
 97      color: rgba($color, $tabs-striped-off-opacity);
 98      opacity: 1;
 99      .badge{
100        opacity:$tabs-striped-off-opacity;
101      }
102      &.tab-item-active,
103      &.active,
104      &.activated {
105        margin-top: -$tabs-striped-border-width;
106        color: $color;
107        border-style: solid;
108        border-width: $tabs-striped-border-width 0 0 0;
109        border-color: $color;
110      }
111    }
112  }
113  &.tabs-top{
114    .tab-item {
115      &.tab-item-active,
116      &.active,
117      &.activated {
118        .badge {
119          top: 4%;
120        }
121      }
122    }
123  }
124}
125
126@mixin tabs-background($style, $color, $border-color) {
127  .#{$style} {
128    .tabs,
129    &> .tabs{
130      background-color: $color;
131      background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
132      border-color: $border-color;
133    }
134  }
135}
136
137@mixin tabs-striped-background($style, $color) {
138  &.#{$style} {
139    .tabs {
140      background-color: $color;
141      background-image:none;
142    }
143  }
144}
145
146@mixin tabs-color($style, $color) {
147  .#{$style} {
148    .tab-item {
149      color: rgba($color, $tabs-off-opacity);
150      opacity: 1;
151      .badge{
152        opacity:$tabs-off-opacity;
153      }
154      &.tab-item-active,
155      &.active,
156      &.activated {
157        color: $color;
158        border: 0 solid $color;
159        .badge{
160          opacity: 1;
161        }
162      }
163    }
164  }
165}
166
167@mixin tabs-striped-color($style, $color) {
168  &.#{$style} {
169    .tab-item {
170      color: rgba($color, $tabs-striped-off-opacity);
171      opacity: 1;
172      .badge{
173        opacity:$tabs-striped-off-opacity;
174      }
175      &.tab-item-active,
176      &.active,
177      &.activated {
178        margin-top: -$tabs-striped-border-width;
179        color: $color;
180        border: 0 solid $color;
181        border-top-width: $tabs-striped-border-width;
182        .badge{
183          top:$tabs-striped-border-width;
184          opacity: 1;
185        }
186      }
187    }
188  }
189}
190
191.tabs-striped {
192  .tabs {
193    background-color: white;
194    background-image: none;
195    border: none;
196    border-bottom: 1px solid #ddd;
197    padding-top: $tabs-striped-border-width;
198  }
199  .tab-item {
200    // default android tab style
201    &.tab-item-active,
202    &.active,
203    &.activated {
204      margin-top: -$tabs-striped-border-width;
205      border-style: solid;
206      border-width: $tabs-striped-border-width 0 0 0;
207      border-color: $dark;
208      .badge{
209        top:$tabs-striped-border-width;
210        opacity: 1;
211      }
212    }
213  }
214  @include tabs-striped('tabs-light', $dark, $light);
215  @include tabs-striped('tabs-stable', $dark, $stable);
216  @include tabs-striped('tabs-positive', $light, $positive);
217  @include tabs-striped('tabs-calm', $light, $calm);
218  @include tabs-striped('tabs-assertive', $light, $assertive);
219  @include tabs-striped('tabs-balanced', $light, $balanced);
220  @include tabs-striped('tabs-energized', $light, $energized);
221  @include tabs-striped('tabs-royal', $light, $royal);
222  @include tabs-striped('tabs-dark', $light, $dark);
223
224  // doing this twice so striped tabs styles don't override specific bg and color vals
225  @include tabs-striped-background('tabs-background-light', $light);
226  @include tabs-striped-background('tabs-background-stable', $stable);
227  @include tabs-striped-background('tabs-background-positive', $positive);
228  @include tabs-striped-background('tabs-background-calm', $calm);
229  @include tabs-striped-background('tabs-background-assertive', $assertive);
230  @include tabs-striped-background('tabs-background-balanced', $balanced);
231  @include tabs-striped-background('tabs-background-energized',$energized);
232  @include tabs-striped-background('tabs-background-royal', $royal);
233  @include tabs-striped-background('tabs-background-dark', $dark);
234
235  @include tabs-striped-color('tabs-color-light', $light);
236  @include tabs-striped-color('tabs-color-stable', $stable);
237  @include tabs-striped-color('tabs-color-positive', $positive);
238  @include tabs-striped-color('tabs-color-calm', $calm);
239  @include tabs-striped-color('tabs-color-assertive', $assertive);
240  @include tabs-striped-color('tabs-color-balanced', $balanced);
241  @include tabs-striped-color('tabs-color-energized',$energized);
242  @include tabs-striped-color('tabs-color-royal', $royal);
243  @include tabs-striped-color('tabs-color-dark', $dark);
244
245}
246
247@include tabs-background('tabs-background-light', $light, $bar-light-border);
248@include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
249@include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
250@include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
251@include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
252@include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
253@include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
254@include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
255@include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
256
257@include tabs-color('tabs-color-light', $light);
258@include tabs-color('tabs-color-stable', $stable);
259@include tabs-color('tabs-color-positive', $positive);
260@include tabs-color('tabs-color-calm', $calm);
261@include tabs-color('tabs-color-assertive', $assertive);
262@include tabs-color('tabs-color-balanced', $balanced);
263@include tabs-color('tabs-color-energized',$energized);
264@include tabs-color('tabs-color-royal', $royal);
265@include tabs-color('tabs-color-dark', $dark);
266
267@mixin tabs-standard-color($style, $color, $off-color:$dark) {
268  &.#{$style} {
269    .tab-item {
270      color: $off-color;
271      &.tab-item-active,
272      &.active,
273      &.activated {
274        color: $color;
275      }
276    }
277
278  }
279
280  &.tabs-striped.#{$style} {
281    .tab-item {
282      &.tab-item-active,
283      &.active,
284      &.activated {
285        border-color: $color;
286        color: $color;
287      }
288    }
289
290  }
291
292}
293
294ion-tabs {
295  @include tabs-standard-color('tabs-color-active-light', $light, $dark);
296  @include tabs-standard-color('tabs-color-active-stable', $stable, $dark);
297  @include tabs-standard-color('tabs-color-active-positive', $positive, $dark);
298  @include tabs-standard-color('tabs-color-active-calm', $calm, $dark);
299  @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark);
300  @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark);
301  @include tabs-standard-color('tabs-color-active-energized',$energized, $dark);
302  @include tabs-standard-color('tabs-color-active-royal', $royal, $dark);
303  @include tabs-standard-color('tabs-color-active-dark', $dark, $light);
304}
305
306.tabs-top {
307  &.tabs-striped {
308    padding-bottom:0;
309    .tab-item{
310      background: transparent;
311      // animate the top bar, leave bottom for platform consistency
312      -webkit-transition: color .1s ease;
313      -moz-transition: color .1s ease;
314      -ms-transition: color .1s ease;
315      -o-transition: color .1s ease;
316      transition: color .1s ease;
317      &.tab-item-active,
318      &.active,
319      &.activated {
320        margin-top: $tabs-striped-border-width - 1px;
321        border-width: 0px 0px $tabs-striped-border-width 0px !important;
322        border-style: solid;
323        > .badge, > i{
324          margin-top: -$tabs-striped-border-width + 1px;
325        }
326      }
327      .badge{
328        -webkit-transition: color .2s ease;
329        -moz-transition: color .2s ease;
330        -ms-transition: color .2s ease;
331        -o-transition: color .2s ease;
332        transition: color .2s ease;
333      }
334    }
335   &:not(.tabs-icon-left):not(.tabs-icon-top){
336       .tab-item{
337          &.tab-item-active,
338          &.active,
339          &.activated {
340             .tab-title, i{
341            display:block;
342            margin-top: -$tabs-striped-border-width + 1px;
343          }
344        }
345      }
346    }
347    &.tabs-icon-left{
348       .tab-item{
349          margin-top: 1px;
350          &.tab-item-active,
351          &.active,
352          &.activated {
353            .tab-title, i {
354              margin-top: -0.1em;
355          }
356        }
357      }
358    }
359  }
360}
361
362/* Allow parent element to have tabs-top */
363/* If you change this, change platform.scss as well */
364.tabs-top > .tabs,
365.tabs.tabs-top {
366  top: $bar-height;
367  padding-top: 0;
368  background-position: bottom;
369  border-top-width: 0;
370  border-bottom-width: 1px;
371  .tab-item {
372    &.tab-item-active,
373    &.active,
374    &.activated {
375      .badge {
376        top: 4%;
377      }
378    }
379  }
380}
381.tabs-top ~ .bar-header {
382  border-bottom-width: 0;
383}
384
385.tab-item {
386  @include flex(1);
387  display: block;
388  overflow: hidden;
389
390  max-width: $tab-item-max-width;
391  height: 100%;
392
393  color: inherit;
394  text-align: center;
395  text-decoration: none;
396  text-overflow: ellipsis;
397  white-space: nowrap;
398
399  font-weight: 400;
400  font-size: $tabs-text-font-size;
401  font-family: $font-family-sans-serif;
402
403  opacity: 0.7;
404
405  &:hover {
406    cursor: pointer;
407  }
408  &.tab-hidden{
409    display:none;
410  }
411}
412
413.tabs-item-hide > .tabs,
414.tabs.tabs-item-hide {
415  display: none;
416}
417
418.tabs-icon-top > .tabs .tab-item,
419.tabs-icon-top.tabs .tab-item,
420.tabs-icon-bottom > .tabs .tab-item,
421.tabs-icon-bottom.tabs .tab-item {
422  font-size: $tabs-text-font-size-side-icon;
423  line-height: $tabs-text-font-size;
424}
425
426.tab-item .icon {
427  display: block;
428  margin: 0 auto;
429  height: $tabs-icon-size;
430  font-size: $tabs-icon-size;
431}
432
433.tabs-icon-left.tabs .tab-item,
434.tabs-icon-left > .tabs .tab-item,
435.tabs-icon-right.tabs .tab-item,
436.tabs-icon-right > .tabs .tab-item {
437  font-size: $tabs-text-font-size-side-icon;
438
439  .icon, .tab-title {
440    display: inline-block;
441    vertical-align: top;
442    margin-top: -.1em;
443
444    &:before {
445    font-size: $tabs-icon-size - 8;
446    line-height: $tabs-height;
447    }
448  }
449}
450
451.tabs-icon-left > .tabs .tab-item .icon,
452.tabs-icon-left.tabs .tab-item .icon {
453  padding-right: 3px;
454}
455
456.tabs-icon-right > .tabs .tab-item .icon,
457.tabs-icon-right.tabs .tab-item .icon {
458  padding-left: 3px;
459}
460
461.tabs-icon-only > .tabs .icon,
462.tabs-icon-only.tabs .icon {
463  line-height: inherit;
464}
465
466
467.tab-item.has-badge {
468  position: relative;
469}
470
471.tab-item .badge {
472  position: absolute;
473  top: 4%;
474  right: 33%; // fallback
475  right: calc(50% - 26px);
476  padding: $tabs-badge-padding;
477  height: auto;
478  font-size: $tabs-badge-font-size;
479  line-height: $tabs-badge-font-size + 4;
480}
481
482
483/* Navigational tab */
484
485/* Active state for tab */
486.tab-item.tab-item-active,
487.tab-item.active,
488.tab-item.activated {
489  opacity: 1;
490
491  &.tab-item-light {
492    color: $light;
493  }
494  &.tab-item-stable {
495    color: $stable;
496  }
497  &.tab-item-positive {
498    color: $positive;
499  }
500  &.tab-item-calm {
501    color: $calm;
502  }
503  &.tab-item-assertive {
504    color: $assertive;
505  }
506  &.tab-item-balanced {
507    color: $balanced;
508  }
509  &.tab-item-energized {
510    color: $energized;
511  }
512  &.tab-item-royal {
513    color: $royal;
514  }
515  &.tab-item-dark {
516    color: $dark;
517  }
518}
519
520.item.tabs {
521  @include display-flex();
522  padding: 0;
523
524  .icon:before {
525    position: relative;
526  }
527}
528
529.tab-item.disabled,
530.tab-item[disabled] {
531  opacity: .4;
532  cursor: default;
533  pointer-events: none;
534}
535
536.nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{
537  top: 0
538}
539.pane[hide-nav-bar="true"] .has-tabs-top{
540  top:$tabs-height
541}
542