liquid_feedback_frontend

annotate style/mdl/switch/_switch.scss @ 1380:276718aedd90

find changesets by author, revision, files, or words in the commit message
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
bsw/jbe@1309 18 @import "../variables";
bsw/jbe@1309 19 @import "../mixins";
bsw/jbe@1309 20
bsw/jbe@1309 21 .mdl-switch {
bsw/jbe@1309 22 position: relative;
bsw/jbe@1309 23
bsw/jbe@1309 24 z-index: 1;
bsw/jbe@1309 25
bsw/jbe@1309 26 vertical-align: middle;
bsw/jbe@1309 27
bsw/jbe@1309 28 display: inline-block;
bsw/jbe@1309 29
bsw/jbe@1309 30 box-sizing: border-box;
bsw/jbe@1309 31 width: 100%;
bsw/jbe@1309 32 height: $switch-label-height;
bsw/jbe@1309 33 margin: 0;
bsw/jbe@1309 34 padding: 0;
bsw/jbe@1309 35
bsw/jbe@1309 36 overflow: visible;
bsw/jbe@1309 37
bsw/jbe@1309 38 &.is-upgraded {
bsw/jbe@1309 39 padding-left: $switch-track-length - 8px;
bsw/jbe@1309 40 }
bsw/jbe@1309 41
bsw/jbe@1309 42 // avoids blue box around switch
bsw/jbe@1309 43 -webkit-touch-callout: none;
bsw/jbe@1309 44 -webkit-user-select: none;
bsw/jbe@1309 45 -moz-user-select: none;
bsw/jbe@1309 46 -ms-user-select: none;
bsw/jbe@1309 47 user-select: none;
bsw/jbe@1309 48 }
bsw/jbe@1309 49
bsw/jbe@1309 50 .mdl-switch__input {
bsw/jbe@1309 51 line-height: $switch-label-height;
bsw/jbe@1309 52
bsw/jbe@1309 53 .mdl-switch.is-upgraded & {
bsw/jbe@1309 54 // Hide input element, while still making it respond to focus.
bsw/jbe@1309 55 position: absolute;
bsw/jbe@1309 56 width: 0;
bsw/jbe@1309 57 height: 0;
bsw/jbe@1309 58 margin: 0;
bsw/jbe@1309 59 padding: 0;
bsw/jbe@1309 60 opacity: 0;
bsw/jbe@1309 61 -ms-appearance: none;
bsw/jbe@1309 62 -moz-appearance: none;
bsw/jbe@1309 63 -webkit-appearance: none;
bsw/jbe@1309 64 appearance: none;
bsw/jbe@1309 65 border: none;
bsw/jbe@1309 66 }
bsw/jbe@1309 67 }
bsw/jbe@1309 68
bsw/jbe@1309 69 .mdl-switch__track {
bsw/jbe@1309 70 background: $switch-off-track-color;
bsw/jbe@1309 71 position: absolute;
bsw/jbe@1309 72 left: 0;
bsw/jbe@1309 73 top: $switch-track-top;
bsw/jbe@1309 74 height: $switch-track-height;
bsw/jbe@1309 75 width: $switch-track-length;
bsw/jbe@1309 76 border-radius: $switch-track-height;
bsw/jbe@1309 77
bsw/jbe@1309 78 cursor: pointer;
bsw/jbe@1309 79
bsw/jbe@1309 80 .mdl-switch.is-checked & {
bsw/jbe@1309 81 background: $switch-track-color;
bsw/jbe@1309 82 }
bsw/jbe@1309 83
bsw/jbe@1309 84 fieldset[disabled] .mdl-switch,
bsw/jbe@1309 85 .mdl-switch.is-disabled & {
bsw/jbe@1309 86 background: $switch-disabled-track-color;
bsw/jbe@1309 87 cursor: auto;
bsw/jbe@1309 88 }
bsw/jbe@1309 89 }
bsw/jbe@1309 90
bsw/jbe@1309 91 .mdl-switch__thumb {
bsw/jbe@1309 92 background: $switch-off-thumb-color;
bsw/jbe@1309 93 position: absolute;
bsw/jbe@1309 94 left: 0;
bsw/jbe@1309 95 top: $switch-thumb-top;
bsw/jbe@1309 96 height: $switch-thumb-size;
bsw/jbe@1309 97 width: $switch-thumb-size;
bsw/jbe@1309 98 border-radius: 50%;
bsw/jbe@1309 99
bsw/jbe@1309 100 cursor: pointer;
bsw/jbe@1309 101
bsw/jbe@1309 102 @include shadow-2dp();
bsw/jbe@1309 103
bsw/jbe@1309 104 @include material-animation-default(0.28s);
bsw/jbe@1309 105 transition-property: left;
bsw/jbe@1309 106
bsw/jbe@1309 107 .mdl-switch.is-checked & {
bsw/jbe@1309 108 background: $switch-thumb-color;
bsw/jbe@1309 109 left: $switch-track-length - $switch-thumb-size;
bsw/jbe@1309 110
bsw/jbe@1309 111 @include shadow-3dp();
bsw/jbe@1309 112 }
bsw/jbe@1309 113
bsw/jbe@1309 114 fieldset[disabled] .mdl-switch,
bsw/jbe@1309 115 .mdl-switch.is-disabled & {
bsw/jbe@1309 116 background: $switch-disabled-thumb-color;
bsw/jbe@1309 117 cursor: auto;
bsw/jbe@1309 118 }
bsw/jbe@1309 119 }
bsw/jbe@1309 120
bsw/jbe@1309 121 .mdl-switch__focus-helper {
bsw/jbe@1309 122 position: absolute;
bsw/jbe@1309 123 top: 50%;
bsw/jbe@1309 124 left: 50%;
bsw/jbe@1309 125
bsw/jbe@1309 126 transform: translate(-$switch-helper-size / 2, -$switch-helper-size / 2);
bsw/jbe@1309 127
bsw/jbe@1309 128 display: inline-block;
bsw/jbe@1309 129
bsw/jbe@1309 130 box-sizing: border-box;
bsw/jbe@1309 131 width: $switch-helper-size;
bsw/jbe@1309 132 height: $switch-helper-size;
bsw/jbe@1309 133 border-radius: 50%;
bsw/jbe@1309 134
bsw/jbe@1309 135 background-color: transparent;
bsw/jbe@1309 136
bsw/jbe@1309 137 .mdl-switch.is-focused & {
bsw/jbe@1309 138 box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
bsw/jbe@1309 139 rgba(0, 0, 0, 0.1);
bsw/jbe@1309 140 background-color: rgba(0, 0, 0, 0.1);
bsw/jbe@1309 141 }
bsw/jbe@1309 142
bsw/jbe@1309 143 .mdl-switch.is-focused.is-checked & {
bsw/jbe@1309 144 box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
bsw/jbe@1309 145 $switch-faded-color;
bsw/jbe@1309 146 background-color: $switch-faded-color;
bsw/jbe@1309 147 }
bsw/jbe@1309 148 }
bsw/jbe@1309 149
bsw/jbe@1309 150 .mdl-switch__label {
bsw/jbe@1309 151 position: relative;
bsw/jbe@1309 152 cursor: pointer;
bsw/jbe@1309 153 font-size: $switch-label-font-size;
bsw/jbe@1309 154 line-height: $switch-label-height;
bsw/jbe@1309 155 margin: 0;
bsw/jbe@1309 156 left: 24px;
bsw/jbe@1309 157
bsw/jbe@1309 158 fieldset[disabled] .mdl-switch,
bsw/jbe@1309 159 .mdl-switch.is-disabled & {
bsw/jbe@1309 160 color: $switch-disabled-thumb-color;
bsw/jbe@1309 161 cursor: auto;
bsw/jbe@1309 162 }
bsw/jbe@1309 163 }
bsw/jbe@1309 164
bsw/jbe@1309 165 .mdl-switch__ripple-container {
bsw/jbe@1309 166 position: absolute;
bsw/jbe@1309 167 z-index: 2;
bsw/jbe@1309 168 top: -($switch-ripple-size - $switch-label-height) / 2;
bsw/jbe@1309 169 left: $switch-thumb-size / 2 - $switch-ripple-size / 2;
bsw/jbe@1309 170
bsw/jbe@1309 171 box-sizing: border-box;
bsw/jbe@1309 172 width: $switch-ripple-size;
bsw/jbe@1309 173 height: $switch-ripple-size;
bsw/jbe@1309 174 border-radius: 50%;
bsw/jbe@1309 175
bsw/jbe@1309 176 cursor: pointer;
bsw/jbe@1309 177
bsw/jbe@1309 178 overflow: hidden;
bsw/jbe@1309 179 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309 180
bsw/jbe@1309 181 transition-duration: 0.40s;
bsw/jbe@1309 182 transition-timing-function: step-end;
bsw/jbe@1309 183 transition-property: left;
bsw/jbe@1309 184
bsw/jbe@1309 185 & .mdl-ripple {
bsw/jbe@1309 186 background: $switch-color;
bsw/jbe@1309 187 }
bsw/jbe@1309 188
bsw/jbe@1309 189 fieldset[disabled] .mdl-switch,
bsw/jbe@1309 190 .mdl-switch.is-disabled & {
bsw/jbe@1309 191 cursor: auto;
bsw/jbe@1309 192 }
bsw/jbe@1309 193
bsw/jbe@1309 194 fieldset[disabled] .mdl-switch & .mdl-ripple,
bsw/jbe@1309 195 .mdl-switch.is-disabled & .mdl-ripple {
bsw/jbe@1309 196 background: transparent;
bsw/jbe@1309 197 }
bsw/jbe@1309 198
bsw/jbe@1309 199 .mdl-switch.is-checked & {
bsw/jbe@1309 200 left: $switch-track-length - $switch-ripple-size / 2 -
bsw/jbe@1309 201 $switch-thumb-size / 2;
bsw/jbe@1309 202 }
bsw/jbe@1309 203 }

Impressum / About Us