liquid_feedback_frontend

annotate style/mdl/switch/_switch.scss @ 1513:895d327a3cb1

find changesets by author, revision, files, or words in the commit message
Limit issues to single unit if single unit mode is configured
author bsw
date Thu Aug 20 13:50:03 2020 +0200 (2020-08-20)
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