bsw/jbe@1309: /** bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: bsw/jbe@1309: @import "../variables"; bsw/jbe@1309: bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs { bsw/jbe@1309: display: block; bsw/jbe@1309: width: 100%; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs__tab-bar { bsw/jbe@1309: display : flex; bsw/jbe@1309: flex-direction : row; bsw/jbe@1309: justify-content : center; // ⇾ bsw/jbe@1309: align-content : space-between; // || bsw/jbe@1309: align-items : flex-start; // ↓ bsw/jbe@1309: bsw/jbe@1309: height : 48px; bsw/jbe@1309: padding : 0 0 0 0; bsw/jbe@1309: margin : 0; bsw/jbe@1309: border-bottom : 1px solid $tab-border-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs__tab { bsw/jbe@1309: margin: 0; bsw/jbe@1309: border: none; bsw/jbe@1309: padding: 0 24px 0 24px; bsw/jbe@1309: bsw/jbe@1309: float: left; bsw/jbe@1309: position: relative; bsw/jbe@1309: display: block; bsw/jbe@1309: bsw/jbe@1309: text-decoration: none; bsw/jbe@1309: height: 48px; bsw/jbe@1309: line-height: 48px; bsw/jbe@1309: bsw/jbe@1309: text-align: center; bsw/jbe@1309: font-weight: 500; bsw/jbe@1309: font-size: $layout-tab-font-size; bsw/jbe@1309: text-transform: uppercase; bsw/jbe@1309: bsw/jbe@1309: color: $tab-text-color; bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs.is-upgraded &.is-active { bsw/jbe@1309: color: $tab-active-text-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs.is-upgraded &.is-active:after { bsw/jbe@1309: height: 2px; bsw/jbe@1309: width: 100%; bsw/jbe@1309: display: block; bsw/jbe@1309: content: " "; bsw/jbe@1309: bottom: 0px; bsw/jbe@1309: left: 0px; bsw/jbe@1309: position: absolute; bsw/jbe@1309: background: $tab-highlight-color; bsw/jbe@1309: animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; bsw/jbe@1309: transition: all 1s cubic-bezier(0.4, 0.0, 1, 1); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: & .mdl-tabs__ripple-container { bsw/jbe@1309: display: block; bsw/jbe@1309: position: absolute; bsw/jbe@1309: height: 100%; bsw/jbe@1309: width: 100%; bsw/jbe@1309: left: 0px; bsw/jbe@1309: top: 0px; bsw/jbe@1309: z-index: 1; bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: bsw/jbe@1309: & .mdl-ripple { bsw/jbe@1309: background: $tab-highlight-color; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs__panel { bsw/jbe@1309: display: block; bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs.is-upgraded & { bsw/jbe@1309: display: none; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-tabs.is-upgraded &.is-active { bsw/jbe@1309: display: block; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: @keyframes border-expand { bsw/jbe@1309: 0% { bsw/jbe@1309: opacity: 0; bsw/jbe@1309: width: 0; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: 100% { bsw/jbe@1309: opacity: 1; bsw/jbe@1309: width: 100%; bsw/jbe@1309: } bsw/jbe@1309: }