liquid_feedback_frontend
annotate style/mdl/icon-toggle/_icon-toggle.scss @ 1380:276718aedd90
Show label for drop down boxes
| author | bsw |
|---|---|
| date | Wed Aug 08 17:38:23 2018 +0200 (2018-08-08) |
| parents | 32cc544d5a5b |
| 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 .mdl-icon-toggle { |
| bsw/jbe@1309 | 20 position: relative; |
| bsw/jbe@1309 | 21 |
| bsw/jbe@1309 | 22 z-index: 1; |
| bsw/jbe@1309 | 23 |
| bsw/jbe@1309 | 24 vertical-align: middle; |
| bsw/jbe@1309 | 25 |
| bsw/jbe@1309 | 26 display: inline-block; |
| bsw/jbe@1309 | 27 height: $icon-toggle-size; |
| bsw/jbe@1309 | 28 margin: 0; |
| bsw/jbe@1309 | 29 padding: 0; |
| bsw/jbe@1309 | 30 } |
| bsw/jbe@1309 | 31 |
| bsw/jbe@1309 | 32 .mdl-icon-toggle__input { |
| bsw/jbe@1309 | 33 line-height: $icon-toggle-size; |
| bsw/jbe@1309 | 34 |
| bsw/jbe@1309 | 35 .mdl-icon-toggle.is-upgraded & { |
| bsw/jbe@1309 | 36 // Hide input element, while still making it respond to focus. |
| bsw/jbe@1309 | 37 position: absolute; |
| bsw/jbe@1309 | 38 width: 0; |
| bsw/jbe@1309 | 39 height: 0; |
| bsw/jbe@1309 | 40 margin: 0; |
| bsw/jbe@1309 | 41 padding: 0; |
| bsw/jbe@1309 | 42 opacity: 0; |
| bsw/jbe@1309 | 43 -ms-appearance: none; |
| bsw/jbe@1309 | 44 -moz-appearance: none; |
| bsw/jbe@1309 | 45 -webkit-appearance: none; |
| bsw/jbe@1309 | 46 appearance: none; |
| bsw/jbe@1309 | 47 border: none; |
| bsw/jbe@1309 | 48 } |
| bsw/jbe@1309 | 49 } |
| bsw/jbe@1309 | 50 |
| bsw/jbe@1309 | 51 .mdl-icon-toggle__label { |
| bsw/jbe@1309 | 52 display: inline-block; |
| bsw/jbe@1309 | 53 position: relative; |
| bsw/jbe@1309 | 54 cursor: pointer; |
| bsw/jbe@1309 | 55 height: $icon-toggle-size; |
| bsw/jbe@1309 | 56 width: $icon-toggle-size; |
| bsw/jbe@1309 | 57 min-width: $icon-toggle-size; |
| bsw/jbe@1309 | 58 color: $icon-toggle-color; |
| bsw/jbe@1309 | 59 border-radius: 50%; |
| bsw/jbe@1309 | 60 padding: 0; |
| bsw/jbe@1309 | 61 margin-left: 0; |
| bsw/jbe@1309 | 62 margin-right: 0; |
| bsw/jbe@1309 | 63 text-align: center; |
| bsw/jbe@1309 | 64 background-color: transparent; |
| bsw/jbe@1309 | 65 will-change: background-color; |
| bsw/jbe@1309 | 66 transition: background-color 0.2s $animation-curve-default, |
| bsw/jbe@1309 | 67 color 0.2s $animation-curve-default; |
| bsw/jbe@1309 | 68 |
| bsw/jbe@1309 | 69 &.material-icons { |
| bsw/jbe@1309 | 70 line-height: $icon-toggle-size; |
| bsw/jbe@1309 | 71 font-size: $icon-toggle-font-size; |
| bsw/jbe@1309 | 72 } |
| bsw/jbe@1309 | 73 |
| bsw/jbe@1309 | 74 .mdl-icon-toggle.is-checked & { |
| bsw/jbe@1309 | 75 color: $icon-toggle-checked-color; |
| bsw/jbe@1309 | 76 } |
| bsw/jbe@1309 | 77 |
| bsw/jbe@1309 | 78 .mdl-icon-toggle.is-disabled & { |
| bsw/jbe@1309 | 79 color: $icon-toggle-disabled-color; |
| bsw/jbe@1309 | 80 cursor: auto; |
| bsw/jbe@1309 | 81 transition: none; |
| bsw/jbe@1309 | 82 } |
| bsw/jbe@1309 | 83 |
| bsw/jbe@1309 | 84 .mdl-icon-toggle.is-focused & { |
| bsw/jbe@1309 | 85 background-color: $icon-toggle-focus-color; |
| bsw/jbe@1309 | 86 } |
| bsw/jbe@1309 | 87 |
| bsw/jbe@1309 | 88 .mdl-icon-toggle.is-focused.is-checked & { |
| bsw/jbe@1309 | 89 background-color: $icon-toggle-checked-focus-color; |
| bsw/jbe@1309 | 90 } |
| bsw/jbe@1309 | 91 } |
| bsw/jbe@1309 | 92 |
| bsw/jbe@1309 | 93 |
| bsw/jbe@1309 | 94 .mdl-icon-toggle__ripple-container { |
| bsw/jbe@1309 | 95 position: absolute; |
| bsw/jbe@1309 | 96 z-index: 2; |
| bsw/jbe@1309 | 97 top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2); |
| bsw/jbe@1309 | 98 left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2); |
| bsw/jbe@1309 | 99 |
| bsw/jbe@1309 | 100 box-sizing: border-box; |
| bsw/jbe@1309 | 101 width: $icon-toggle-ripple-size; |
| bsw/jbe@1309 | 102 height: $icon-toggle-ripple-size; |
| bsw/jbe@1309 | 103 border-radius: 50%; |
| bsw/jbe@1309 | 104 |
| bsw/jbe@1309 | 105 cursor: pointer; |
| bsw/jbe@1309 | 106 |
| bsw/jbe@1309 | 107 overflow: hidden; |
| bsw/jbe@1309 | 108 -webkit-mask-image: -webkit-radial-gradient(circle, white, black); |
| bsw/jbe@1309 | 109 |
| bsw/jbe@1309 | 110 & .mdl-ripple { |
| bsw/jbe@1309 | 111 background: $icon-toggle-color; |
| bsw/jbe@1309 | 112 } |
| bsw/jbe@1309 | 113 |
| bsw/jbe@1309 | 114 .mdl-icon-toggle.is-disabled & { |
| bsw/jbe@1309 | 115 cursor: auto; |
| bsw/jbe@1309 | 116 } |
| bsw/jbe@1309 | 117 |
| bsw/jbe@1309 | 118 .mdl-icon-toggle.is-disabled & .mdl-ripple { |
| bsw/jbe@1309 | 119 background: transparent; |
| bsw/jbe@1309 | 120 } |
| bsw/jbe@1309 | 121 } |