liquid_feedback_frontend

annotate style/mdl/checkbox/_checkbox.scss @ 1500:71f54c43d7cb

find changesets by author, revision, files, or words in the commit message
Added API support interface
author bsw
date Tue Mar 24 16:59:32 2020 +0100 (2020-03-24)
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 @import "../mixins";
bsw/jbe@1309 19
bsw/jbe@1309 20 .mdl-checkbox {
bsw/jbe@1309 21 position: relative;
bsw/jbe@1309 22
bsw/jbe@1309 23 z-index: 1;
bsw/jbe@1309 24
bsw/jbe@1309 25 vertical-align: middle;
bsw/jbe@1309 26
bsw/jbe@1309 27 display: inline-block;
bsw/jbe@1309 28
bsw/jbe@1309 29 box-sizing: border-box;
bsw/jbe@1309 30 width: 100%;
bsw/jbe@1309 31 height: $checkbox-label-height;
bsw/jbe@1309 32 margin: 0;
bsw/jbe@1309 33 padding: 0;
bsw/jbe@1309 34
bsw/jbe@1309 35 &.is-upgraded {
bsw/jbe@1309 36 padding-left: $checkbox-button-size + $checkbox-padding;
bsw/jbe@1309 37 }
bsw/jbe@1309 38 }
bsw/jbe@1309 39
bsw/jbe@1309 40 .mdl-checkbox__input {
bsw/jbe@1309 41 line-height: $checkbox-label-height;
bsw/jbe@1309 42
bsw/jbe@1309 43 .mdl-checkbox.is-upgraded & {
bsw/jbe@1309 44 // Hide input element, while still making it respond to focus.
bsw/jbe@1309 45 position: absolute;
bsw/jbe@1309 46 width: 0;
bsw/jbe@1309 47 height: 0;
bsw/jbe@1309 48 margin: 0;
bsw/jbe@1309 49 padding: 0;
bsw/jbe@1309 50 opacity: 0;
bsw/jbe@1309 51 -ms-appearance: none;
bsw/jbe@1309 52 -moz-appearance: none;
bsw/jbe@1309 53 -webkit-appearance: none;
bsw/jbe@1309 54 appearance: none;
bsw/jbe@1309 55 border: none;
bsw/jbe@1309 56 }
bsw/jbe@1309 57 }
bsw/jbe@1309 58
bsw/jbe@1309 59 .mdl-checkbox__box-outline {
bsw/jbe@1309 60 position: absolute;
bsw/jbe@1309 61 top: $checkbox-top-offset;
bsw/jbe@1309 62 left: 0;
bsw/jbe@1309 63
bsw/jbe@1309 64 display: inline-block;
bsw/jbe@1309 65
bsw/jbe@1309 66 box-sizing: border-box;
bsw/jbe@1309 67 width: $checkbox-button-size;
bsw/jbe@1309 68 height: $checkbox-button-size;
bsw/jbe@1309 69 margin: 0;
bsw/jbe@1309 70
bsw/jbe@1309 71 cursor: pointer;
bsw/jbe@1309 72 overflow: hidden;
bsw/jbe@1309 73
bsw/jbe@1309 74 border: 2px solid $checkbox-off-color;
bsw/jbe@1309 75 border-radius: 2px;
bsw/jbe@1309 76
bsw/jbe@1309 77 z-index: 2;
bsw/jbe@1309 78
bsw/jbe@1309 79 .mdl-checkbox.is-checked & {
bsw/jbe@1309 80 border: 2px solid $checkbox-color;
bsw/jbe@1309 81 }
bsw/jbe@1309 82
bsw/jbe@1309 83 fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309 84 .mdl-checkbox.is-disabled & {
bsw/jbe@1309 85 border: 2px solid $checkbox-disabled-color;
bsw/jbe@1309 86 cursor: auto;
bsw/jbe@1309 87 }
bsw/jbe@1309 88 }
bsw/jbe@1309 89
bsw/jbe@1309 90 .mdl-checkbox__focus-helper {
bsw/jbe@1309 91 position: absolute;
bsw/jbe@1309 92 top: $checkbox-top-offset;
bsw/jbe@1309 93 left: 0;
bsw/jbe@1309 94
bsw/jbe@1309 95 display: inline-block;
bsw/jbe@1309 96
bsw/jbe@1309 97 box-sizing: border-box;
bsw/jbe@1309 98 width: $checkbox-button-size;
bsw/jbe@1309 99 height: $checkbox-button-size;
bsw/jbe@1309 100 border-radius: 50%;
bsw/jbe@1309 101
bsw/jbe@1309 102 background-color: transparent;
bsw/jbe@1309 103
bsw/jbe@1309 104 .mdl-checkbox.is-focused & {
bsw/jbe@1309 105 box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
bsw/jbe@1309 106 background-color: rgba(0, 0, 0, 0.1);
bsw/jbe@1309 107 }
bsw/jbe@1309 108
bsw/jbe@1309 109 .mdl-checkbox.is-focused.is-checked & {
bsw/jbe@1309 110 box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
bsw/jbe@1309 111 background-color: $checkbox-focus-color;
bsw/jbe@1309 112 }
bsw/jbe@1309 113 }
bsw/jbe@1309 114
bsw/jbe@1309 115 .mdl-checkbox__tick-outline {
bsw/jbe@1309 116 position: absolute;
bsw/jbe@1309 117 top: 0;
bsw/jbe@1309 118 left: 0;
bsw/jbe@1309 119 height: 100%;
bsw/jbe@1309 120 width: 100%;
bsw/jbe@1309 121 mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
bsw/jbe@1309 122
bsw/jbe@1309 123 background: transparent;
bsw/jbe@1309 124 @include material-animation-default(0.28s);
bsw/jbe@1309 125 transition-property: background;
bsw/jbe@1309 126
bsw/jbe@1309 127 .mdl-checkbox.is-checked & {
bsw/jbe@1309 128 background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
bsw/jbe@1309 129 }
bsw/jbe@1309 130
bsw/jbe@1309 131 fieldset[disabled] .mdl-checkbox.is-checked &,
bsw/jbe@1309 132 .mdl-checkbox.is-checked.is-disabled & {
bsw/jbe@1309 133 background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
bsw/jbe@1309 134 }
bsw/jbe@1309 135 }
bsw/jbe@1309 136
bsw/jbe@1309 137 .mdl-checkbox__label {
bsw/jbe@1309 138 position: relative;
bsw/jbe@1309 139 cursor: pointer;
bsw/jbe@1309 140 font-size: $checkbox-label-font-size;
bsw/jbe@1309 141 line-height: $checkbox-label-height;
bsw/jbe@1309 142 margin: 0;
bsw/jbe@1309 143
bsw/jbe@1309 144 fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309 145 .mdl-checkbox.is-disabled & {
bsw/jbe@1309 146 color: $checkbox-disabled-color;
bsw/jbe@1309 147 cursor: auto;
bsw/jbe@1309 148 }
bsw/jbe@1309 149 }
bsw/jbe@1309 150
bsw/jbe@1309 151 .mdl-checkbox__ripple-container {
bsw/jbe@1309 152 position: absolute;
bsw/jbe@1309 153 z-index: 2;
bsw/jbe@1309 154 top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
bsw/jbe@1309 155 left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
bsw/jbe@1309 156
bsw/jbe@1309 157 box-sizing: border-box;
bsw/jbe@1309 158 width: $checkbox-ripple-size;
bsw/jbe@1309 159 height: $checkbox-ripple-size;
bsw/jbe@1309 160 border-radius: 50%;
bsw/jbe@1309 161
bsw/jbe@1309 162 cursor: pointer;
bsw/jbe@1309 163
bsw/jbe@1309 164 overflow: hidden;
bsw/jbe@1309 165 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309 166
bsw/jbe@1309 167 & .mdl-ripple {
bsw/jbe@1309 168 background: $checkbox-color;
bsw/jbe@1309 169 }
bsw/jbe@1309 170
bsw/jbe@1309 171 fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309 172 .mdl-checkbox.is-disabled & {
bsw/jbe@1309 173 cursor: auto;
bsw/jbe@1309 174 }
bsw/jbe@1309 175
bsw/jbe@1309 176 fieldset[disabled] .mdl-checkbox & .mdl-ripple,
bsw/jbe@1309 177 .mdl-checkbox.is-disabled & .mdl-ripple {
bsw/jbe@1309 178 background: transparent;
bsw/jbe@1309 179 }
bsw/jbe@1309 180 }

Impressum / About Us