liquid_feedback_frontend
annotate style/mdl/tabs/_tabs.scss @ 1309:32cc544d5a5b
Cumulative patch for upcoming frontend version 4
| author | bsw/jbe |
|---|---|
| date | Sun Jul 15 14:07:29 2018 +0200 (2018-07-15) |
| parents | |
| children |
| 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 } |