third_party/polymer/components-chromium/paper-tabs/paper-tabs.css

   1 /*
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 */
   9
  10 :host {
  11   display: block;
  12   font-size: 14px;
  13   font-weight: 500;
  14   height: 48px;
  15   overflow: hidden;
  16   -webkit-user-select: none;
  17   -moz-user-select: none;
  18   -ms-user-select: none;
  19   user-select: none;
  20   -webkit-tap-highlight-color: rgba(0,0,0,0);
  21 }
  22
  23 #tabsContainer {
  24   position: relative;
  25   height: 100%;
  26   white-space: nowrap;
  27   overflow: hidden;
  28 }
  29
  30 #tabsContent {
  31   height: 100%;
  32 }
  33
  34 #tabsContainer.scrollable > #tabsContent {
  35   position: absolute;
  36   white-space: nowrap;
  37 }
  38
  39 .scroll-button {
  40   width: 40px;
  41   padding: 0 12px;
  42 }
  43
  44 .scroll-button > paper-icon-button {
  45   transition: opacity 0.18s;
  46 }
  47
  48 .scroll-button > .hidden {
  49   opacity: 0;
  50 }
  51
  52 #selectionBar {
  53   position: absolute;
  54   height: 2px;
  55   bottom: 0;
  56   left: 0;
  57   width: 0;
  58   background-color: #ffff8d;
  59   transition: width, left;
  60 }
  61
  62 #selectionBar.expand {
  63   transition-duration: 0.15s;
  64   transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
  65 }
  66
  67 #selectionBar.contract {
  68   transition-duration: 0.18s;
  69   transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  70 }
  71
  72 polyfill-next-selector { content: '#tabsContent > *:not(#selectionBar)'; }
  73 ::content > * {
  74   height: 100%;
  75 }