third_party/ot-br-posix/repo/third_party/mdl/repo/src/tabs/_tabs.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18
  19
  20 .mdl-tabs {
  21   display: block;
  22   width: 100%;
  23 }
  24
  25 .mdl-tabs__tab-bar {
  26     display         : flex;
  27     flex-direction  : row;
  28     justify-content : center; // ⇾
  29     align-content   : space-between; // ||
  30     align-items     : flex-start; // ↓
  31
  32     height          : 48px;
  33     padding         : 0 0 0 0;
  34     margin          : 0;
  35     border-bottom   : 1px solid $tab-border-color;
  36 }
  37
  38 .mdl-tabs__tab {
  39   margin: 0;
  40   border: none;
  41   padding: 0 24px 0 24px;
  42
  43   float: left;
  44   position: relative;
  45   display: block;
  46
  47   text-decoration: none;
  48   height: 48px;
  49   line-height: 48px;
  50
  51   text-align: center;
  52   font-weight: 500;
  53   font-size: $layout-tab-font-size;
  54   text-transform: uppercase;
  55
  56   color: $tab-text-color;
  57   overflow: hidden;
  58
  59   .mdl-tabs.is-upgraded &.is-active {
  60     color: $tab-active-text-color;
  61   }
  62
  63   .mdl-tabs.is-upgraded &.is-active:after {
  64     height: 2px;
  65     width: 100%;
  66     display: block;
  67     content: " ";
  68     bottom: 0px;
  69     left: 0px;
  70     position: absolute;
  71     background: $tab-highlight-color;
  72     animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
  73     transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
  74   }
  75
  76   & .mdl-tabs__ripple-container {
  77     display: block;
  78     position: absolute;
  79     height: 100%;
  80     width: 100%;
  81     left: 0px;
  82     top: 0px;
  83     z-index: 1;
  84     overflow: hidden;
  85
  86     & .mdl-ripple {
  87       background: $tab-highlight-color;
  88     }
  89   }
  90 }
  91
  92 .mdl-tabs__panel {
  93   display: block;
  94
  95   .mdl-tabs.is-upgraded & {
  96     display: none;
  97   }
  98
  99   .mdl-tabs.is-upgraded &.is-active {
 100     display: block;
 101   }
 102 }
 103
 104 @keyframes border-expand {
 105   0% {
 106     opacity: 0;
 107     width: 0;
 108   }
 109
 110   100% {
 111     opacity: 1;
 112     width: 100%;
 113   }
 114 }