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