liquid_feedback_frontend

annotate style/mdl/radio/_radio.scss @ 1404:f99e7df399e6

find changesets by author, revision, files, or words in the commit message
Text case change
author bsw
date Mon Aug 13 19:52:00 2018 +0200 (2018-08-13)
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-radio {
bsw/jbe@1309 21 position: relative;
bsw/jbe@1309 22
bsw/jbe@1309 23 font-size: $radio-label-font-size;
bsw/jbe@1309 24 line-height: $radio-label-height;
bsw/jbe@1309 25
bsw/jbe@1309 26 display: inline-block;
bsw/jbe@1309 27
bsw/jbe@1309 28 box-sizing: border-box;
bsw/jbe@1309 29 margin: 0;
bsw/jbe@1309 30 padding-left: 0;
bsw/jbe@1309 31
bsw/jbe@1309 32 &.is-upgraded {
bsw/jbe@1309 33 padding-left: $radio-button-size + $radio-padding;
bsw/jbe@1309 34 }
bsw/jbe@1309 35 }
bsw/jbe@1309 36
bsw/jbe@1309 37 .mdl-radio__button {
bsw/jbe@1309 38 line-height: $radio-label-height;
bsw/jbe@1309 39
bsw/jbe@1309 40 .mdl-radio.is-upgraded & {
bsw/jbe@1309 41 // Hide input element, while still making it respond to focus.
bsw/jbe@1309 42 position: absolute;
bsw/jbe@1309 43 width: 0;
bsw/jbe@1309 44 height: 0;
bsw/jbe@1309 45 margin: 0;
bsw/jbe@1309 46 padding: 0;
bsw/jbe@1309 47 opacity: 0;
bsw/jbe@1309 48 -ms-appearance: none;
bsw/jbe@1309 49 -moz-appearance: none;
bsw/jbe@1309 50 -webkit-appearance: none;
bsw/jbe@1309 51 appearance: none;
bsw/jbe@1309 52 border: none;
bsw/jbe@1309 53 }
bsw/jbe@1309 54 }
bsw/jbe@1309 55
bsw/jbe@1309 56 .mdl-radio__outer-circle {
bsw/jbe@1309 57 position: absolute;
bsw/jbe@1309 58 top: $radio-top-offset;
bsw/jbe@1309 59 left: 0;
bsw/jbe@1309 60
bsw/jbe@1309 61 display: inline-block;
bsw/jbe@1309 62
bsw/jbe@1309 63 box-sizing: border-box;
bsw/jbe@1309 64 width: $radio-button-size;
bsw/jbe@1309 65 height: $radio-button-size;
bsw/jbe@1309 66 margin: 0;
bsw/jbe@1309 67
bsw/jbe@1309 68 cursor: pointer;
bsw/jbe@1309 69
bsw/jbe@1309 70 border: 2px solid $radio-off-color;
bsw/jbe@1309 71 border-radius: 50%;
bsw/jbe@1309 72
bsw/jbe@1309 73 z-index: 2;
bsw/jbe@1309 74
bsw/jbe@1309 75 .mdl-radio.is-checked & {
bsw/jbe@1309 76 border: 2px solid $radio-color;
bsw/jbe@1309 77 }
bsw/jbe@1309 78
bsw/jbe@1309 79 fieldset[disabled] .mdl-radio,
bsw/jbe@1309 80 .mdl-radio.is-disabled & {
bsw/jbe@1309 81 border: 2px solid $radio-disabled-color;
bsw/jbe@1309 82 cursor: auto;
bsw/jbe@1309 83 }
bsw/jbe@1309 84 }
bsw/jbe@1309 85
bsw/jbe@1309 86 .mdl-radio__inner-circle {
bsw/jbe@1309 87 position: absolute;
bsw/jbe@1309 88 z-index: 1;
bsw/jbe@1309 89 margin: 0;
bsw/jbe@1309 90 top: $radio-top-offset + $radio-inner-margin;
bsw/jbe@1309 91 left: $radio-inner-margin;
bsw/jbe@1309 92
bsw/jbe@1309 93 box-sizing: border-box;
bsw/jbe@1309 94 width: $radio-button-size - ($radio-inner-margin * 2);
bsw/jbe@1309 95 height: $radio-button-size - ($radio-inner-margin * 2);
bsw/jbe@1309 96
bsw/jbe@1309 97 cursor: pointer;
bsw/jbe@1309 98
bsw/jbe@1309 99 @include material-animation-default(0.28s);
bsw/jbe@1309 100 transition-property: transform;
bsw/jbe@1309 101 transform: scale3d(0, 0, 0);
bsw/jbe@1309 102
bsw/jbe@1309 103 border-radius: 50%;
bsw/jbe@1309 104 background: $radio-color;
bsw/jbe@1309 105
bsw/jbe@1309 106 .mdl-radio.is-checked & {
bsw/jbe@1309 107 transform: scale3d(1, 1, 1);
bsw/jbe@1309 108 }
bsw/jbe@1309 109
bsw/jbe@1309 110 fieldset[disabled] .mdl-radio &,
bsw/jbe@1309 111 .mdl-radio.is-disabled & {
bsw/jbe@1309 112 background: $radio-disabled-color;
bsw/jbe@1309 113 cursor: auto;
bsw/jbe@1309 114 }
bsw/jbe@1309 115
bsw/jbe@1309 116 .mdl-radio.is-focused & {
bsw/jbe@1309 117 box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
bsw/jbe@1309 118 }
bsw/jbe@1309 119 }
bsw/jbe@1309 120
bsw/jbe@1309 121 .mdl-radio__label {
bsw/jbe@1309 122 cursor: pointer;
bsw/jbe@1309 123
bsw/jbe@1309 124 fieldset[disabled] .mdl-radio &,
bsw/jbe@1309 125 .mdl-radio.is-disabled & {
bsw/jbe@1309 126 color: $radio-disabled-color;
bsw/jbe@1309 127 cursor: auto;
bsw/jbe@1309 128 }
bsw/jbe@1309 129 }
bsw/jbe@1309 130
bsw/jbe@1309 131 .mdl-radio__ripple-container {
bsw/jbe@1309 132 position: absolute;
bsw/jbe@1309 133 z-index: 2;
bsw/jbe@1309 134 top: -(($radio-ripple-size - $radio-label-height) / 2);
bsw/jbe@1309 135 left: -(($radio-ripple-size - $radio-button-size) / 2);
bsw/jbe@1309 136
bsw/jbe@1309 137 box-sizing: border-box;
bsw/jbe@1309 138 width: $radio-ripple-size;
bsw/jbe@1309 139 height: $radio-ripple-size;
bsw/jbe@1309 140 border-radius: 50%;
bsw/jbe@1309 141
bsw/jbe@1309 142 cursor: pointer;
bsw/jbe@1309 143
bsw/jbe@1309 144 overflow: hidden;
bsw/jbe@1309 145 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309 146
bsw/jbe@1309 147 & .mdl-ripple {
bsw/jbe@1309 148 background: $radio-color;
bsw/jbe@1309 149 }
bsw/jbe@1309 150
bsw/jbe@1309 151 fieldset[disabled] .mdl-radio &,
bsw/jbe@1309 152 .mdl-radio.is-disabled & {
bsw/jbe@1309 153 cursor: auto;
bsw/jbe@1309 154 }
bsw/jbe@1309 155
bsw/jbe@1309 156 fieldset[disabled] .mdl-radio & .mdl-ripple,
bsw/jbe@1309 157 .mdl-radio.is-disabled & .mdl-ripple {
bsw/jbe@1309 158 background: transparent;
bsw/jbe@1309 159 }
bsw/jbe@1309 160 }

Impressum / About Us