liquid_feedback_frontend

annotate style/mdl/button/_button.scss @ 1518:9514b3c04ccb

find changesets by author, revision, files, or words in the commit message
Fixed module name
author bsw
date Thu Aug 20 14:36:56 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 @import "../variables";
bsw/jbe@1309 18 @import "../mixins";
bsw/jbe@1309 19
bsw/jbe@1309 20 // The button component. Defaults to a flat button.
bsw/jbe@1309 21 .mdl-button {
bsw/jbe@1309 22 background: transparent;
bsw/jbe@1309 23 border: none;
bsw/jbe@1309 24 border-radius: $button-border-radius;
bsw/jbe@1309 25 color: $button-secondary-color;
bsw/jbe@1309 26 position: relative;
bsw/jbe@1309 27 height: $button-height;
bsw/jbe@1309 28 margin: 0;
bsw/jbe@1309 29 min-width: $button-min-width;
bsw/jbe@1309 30 padding: 0 $button-padding;
bsw/jbe@1309 31 display: inline-block;
bsw/jbe@1309 32 @include typo-button();
bsw/jbe@1309 33 overflow: hidden;
bsw/jbe@1309 34 will-change: box-shadow;
bsw/jbe@1309 35 transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
bsw/jbe@1309 36 background-color 0.2s $animation-curve-default,
bsw/jbe@1309 37 color 0.2s $animation-curve-default;
bsw/jbe@1309 38 outline: none;
bsw/jbe@1309 39 cursor: pointer;
bsw/jbe@1309 40 text-decoration: none;
bsw/jbe@1309 41 text-align: center;
bsw/jbe@1309 42 line-height: $button-height;
bsw/jbe@1309 43 vertical-align: middle;
bsw/jbe@1309 44
bsw/jbe@1309 45 &::-moz-focus-inner {
bsw/jbe@1309 46 border: 0;
bsw/jbe@1309 47 }
bsw/jbe@1309 48
bsw/jbe@1309 49 &:hover {
bsw/jbe@1309 50 background-color: $button-hover-color;
bsw/jbe@1309 51 }
bsw/jbe@1309 52
bsw/jbe@1309 53 &:focus:not(:active) {
bsw/jbe@1309 54 background-color: $button-focus-color;
bsw/jbe@1309 55 }
bsw/jbe@1309 56
bsw/jbe@1309 57 &:active {
bsw/jbe@1309 58 background-color: $button-active-color;
bsw/jbe@1309 59 }
bsw/jbe@1309 60
bsw/jbe@1309 61 &.mdl-button--colored {
bsw/jbe@1309 62 color: $button-primary-color-alt;
bsw/jbe@1309 63
bsw/jbe@1309 64 &:focus:not(:active) {
bsw/jbe@1309 65 background-color: $button-focus-color-alt;
bsw/jbe@1309 66 }
bsw/jbe@1309 67 }
bsw/jbe@1309 68 }
bsw/jbe@1309 69
bsw/jbe@1309 70 input.mdl-button[type="submit"] {
bsw/jbe@1309 71 -webkit-appearance:none;
bsw/jbe@1309 72 }
bsw/jbe@1309 73
bsw/jbe@1309 74 // Raised buttons
bsw/jbe@1309 75 .mdl-button--raised {
bsw/jbe@1309 76 background: $button-primary-color;
bsw/jbe@1309 77 @include shadow-2dp();
bsw/jbe@1309 78
bsw/jbe@1309 79 &:active {
bsw/jbe@1309 80 @include shadow-4dp();
bsw/jbe@1309 81 background-color: $button-active-color;
bsw/jbe@1309 82 }
bsw/jbe@1309 83
bsw/jbe@1309 84 &:focus:not(:active) {
bsw/jbe@1309 85 @include focus-shadow();
bsw/jbe@1309 86 background-color: $button-active-color;
bsw/jbe@1309 87 }
bsw/jbe@1309 88
bsw/jbe@1309 89 &.mdl-button--colored {
bsw/jbe@1309 90 background: $button-primary-color-alt;
bsw/jbe@1309 91 color: $button-secondary-color-alt;
bsw/jbe@1309 92
bsw/jbe@1309 93 &:hover {
bsw/jbe@1309 94 background-color: $button-hover-color-alt;
bsw/jbe@1309 95 }
bsw/jbe@1309 96
bsw/jbe@1309 97 &:active {
bsw/jbe@1309 98 background-color: $button-active-color-alt;
bsw/jbe@1309 99 }
bsw/jbe@1309 100
bsw/jbe@1309 101 &:focus:not(:active) {
bsw/jbe@1309 102 background-color: $button-active-color-alt;
bsw/jbe@1309 103 }
bsw/jbe@1309 104
bsw/jbe@1309 105 & .mdl-ripple {
bsw/jbe@1309 106 background: $button-ripple-color-alt;
bsw/jbe@1309 107 }
bsw/jbe@1309 108 }
bsw/jbe@1309 109 }
bsw/jbe@1309 110
bsw/jbe@1309 111
bsw/jbe@1309 112 // FABs
bsw/jbe@1309 113 .mdl-button--fab {
bsw/jbe@1309 114 border-radius: 50%;
bsw/jbe@1309 115 font-size: $button-fab-font-size;
bsw/jbe@1309 116 height: $button-fab-size;
bsw/jbe@1309 117 margin: auto;
bsw/jbe@1309 118 min-width: $button-fab-size;
bsw/jbe@1309 119 width: $button-fab-size;
bsw/jbe@1309 120 padding: 0;
bsw/jbe@1309 121 overflow: hidden;
bsw/jbe@1309 122 background: $button-primary-color;
bsw/jbe@1309 123 box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
bsw/jbe@1309 124 position: relative;
bsw/jbe@1309 125 line-height: normal;
bsw/jbe@1309 126
bsw/jbe@1309 127 & .material-icons {
bsw/jbe@1309 128 position: absolute;
bsw/jbe@1309 129 top: 50%;
bsw/jbe@1309 130 left: 50%;
bsw/jbe@1309 131 transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
bsw/jbe@1309 132 line-height: $button-fab-font-size;
bsw/jbe@1309 133 width: $button-fab-font-size;
bsw/jbe@1309 134 }
bsw/jbe@1309 135
bsw/jbe@1309 136 &.mdl-button--mini-fab {
bsw/jbe@1309 137 height: $button-fab-size-mini;
bsw/jbe@1309 138 min-width: $button-fab-size-mini;
bsw/jbe@1309 139 width: $button-fab-size-mini;
bsw/jbe@1309 140 }
bsw/jbe@1309 141
bsw/jbe@1309 142 & .mdl-button__ripple-container {
bsw/jbe@1309 143 border-radius: 50%;
bsw/jbe@1309 144 // Fixes clipping bug in Safari.
bsw/jbe@1309 145 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309 146 }
bsw/jbe@1309 147
bsw/jbe@1309 148 &:active {
bsw/jbe@1309 149 @include shadow-4dp();
bsw/jbe@1309 150 background-color: $button-active-color;
bsw/jbe@1309 151 }
bsw/jbe@1309 152
bsw/jbe@1309 153 &:focus:not(:active) {
bsw/jbe@1309 154 @include focus-shadow();
bsw/jbe@1309 155 background-color: $button-active-color;
bsw/jbe@1309 156 }
bsw/jbe@1309 157
bsw/jbe@1309 158 &.mdl-button--colored {
bsw/jbe@1309 159 background: $button-fab-color-alt;
bsw/jbe@1309 160 color: $button-fab-text-color-alt;
bsw/jbe@1309 161
bsw/jbe@1309 162 &:hover {
bsw/jbe@1309 163 background-color: $button-fab-hover-color-alt;
bsw/jbe@1309 164 }
bsw/jbe@1309 165
bsw/jbe@1309 166 &:focus:not(:active) {
bsw/jbe@1309 167 background-color: $button-fab-active-color-alt;
bsw/jbe@1309 168 }
bsw/jbe@1309 169
bsw/jbe@1309 170 &:active {
bsw/jbe@1309 171 background-color: $button-fab-active-color-alt;
bsw/jbe@1309 172 }
bsw/jbe@1309 173
bsw/jbe@1309 174 & .mdl-ripple {
bsw/jbe@1309 175 background: $button-fab-ripple-color-alt;
bsw/jbe@1309 176 }
bsw/jbe@1309 177 }
bsw/jbe@1309 178 }
bsw/jbe@1309 179
bsw/jbe@1309 180
bsw/jbe@1309 181 // Icon buttons
bsw/jbe@1309 182 .mdl-button--icon {
bsw/jbe@1309 183 border-radius: 50%;
bsw/jbe@1309 184 font-size: $button-fab-font-size;
bsw/jbe@1309 185 height: $button-icon-size;
bsw/jbe@1309 186 margin-left: 0;
bsw/jbe@1309 187 margin-right: 0;
bsw/jbe@1309 188 min-width: $button-icon-size;
bsw/jbe@1309 189 width: $button-icon-size;
bsw/jbe@1309 190 padding: 0;
bsw/jbe@1309 191 overflow: hidden;
bsw/jbe@1309 192 color: inherit;
bsw/jbe@1309 193 line-height: normal;
bsw/jbe@1309 194
bsw/jbe@1309 195 & .material-icons {
bsw/jbe@1309 196 position: absolute;
bsw/jbe@1309 197 top: 50%;
bsw/jbe@1309 198 left: 50%;
bsw/jbe@1309 199 transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
bsw/jbe@1309 200 line-height: $button-fab-font-size;
bsw/jbe@1309 201 width: $button-fab-font-size;
bsw/jbe@1309 202 }
bsw/jbe@1309 203
bsw/jbe@1309 204 &.mdl-button--mini-icon {
bsw/jbe@1309 205 height: $button-icon-size-mini;
bsw/jbe@1309 206 min-width: $button-icon-size-mini;
bsw/jbe@1309 207 width: $button-icon-size-mini;
bsw/jbe@1309 208
bsw/jbe@1309 209 & .material-icons {
bsw/jbe@1309 210 top: ($button-icon-size-mini - $button-fab-font-size) / 2;
bsw/jbe@1309 211 left: ($button-icon-size-mini - $button-fab-font-size) / 2;
bsw/jbe@1309 212 }
bsw/jbe@1309 213 }
bsw/jbe@1309 214
bsw/jbe@1309 215 & .mdl-button__ripple-container {
bsw/jbe@1309 216 border-radius: 50%;
bsw/jbe@1309 217 // Fixes clipping bug in Safari.
bsw/jbe@1309 218 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309 219 }
bsw/jbe@1309 220 }
bsw/jbe@1309 221
bsw/jbe@1309 222
bsw/jbe@1309 223 // Ripples
bsw/jbe@1309 224 .mdl-button__ripple-container {
bsw/jbe@1309 225 display: block;
bsw/jbe@1309 226 height: 100%;
bsw/jbe@1309 227 left: 0px;
bsw/jbe@1309 228 position: absolute;
bsw/jbe@1309 229 top: 0px;
bsw/jbe@1309 230 width: 100%;
bsw/jbe@1309 231 z-index: 0;
bsw/jbe@1309 232 overflow: hidden;
bsw/jbe@1309 233
bsw/jbe@1309 234 .mdl-button[disabled] & .mdl-ripple,
bsw/jbe@1309 235 .mdl-button.mdl-button--disabled & .mdl-ripple {
bsw/jbe@1309 236 background-color: transparent;
bsw/jbe@1309 237 }
bsw/jbe@1309 238 }
bsw/jbe@1309 239
bsw/jbe@1309 240 // Colorized buttons
bsw/jbe@1309 241
bsw/jbe@1309 242 .mdl-button--primary.mdl-button--primary {
bsw/jbe@1309 243 color: $button-primary-color-alt;
bsw/jbe@1309 244 & .mdl-ripple {
bsw/jbe@1309 245 background: $button-secondary-color-alt;
bsw/jbe@1309 246 }
bsw/jbe@1309 247 &.mdl-button--raised, &.mdl-button--fab {
bsw/jbe@1309 248 color: $button-secondary-color-alt;
bsw/jbe@1309 249 background-color: $button-primary-color-alt;
bsw/jbe@1309 250 }
bsw/jbe@1309 251 }
bsw/jbe@1309 252
bsw/jbe@1309 253 .mdl-button--accent.mdl-button--accent {
bsw/jbe@1309 254 color: $button-fab-color-alt;
bsw/jbe@1309 255 & .mdl-ripple {
bsw/jbe@1309 256 background: $button-fab-text-color-alt;
bsw/jbe@1309 257 }
bsw/jbe@1309 258 &.mdl-button--raised, &.mdl-button--fab {
bsw/jbe@1309 259 color: $button-fab-text-color-alt;
bsw/jbe@1309 260 background-color: $button-fab-color-alt;
bsw/jbe@1309 261 }
bsw/jbe@1309 262 }
bsw/jbe@1309 263
bsw/jbe@1309 264 // Disabled buttons
bsw/jbe@1309 265
bsw/jbe@1309 266 .mdl-button {
bsw/jbe@1309 267 // Bump up specificity by using [disabled] twice.
bsw/jbe@1309 268 &[disabled][disabled],
bsw/jbe@1309 269 &.mdl-button--disabled.mdl-button--disabled {
bsw/jbe@1309 270 color: $button-secondary-color-disabled;
bsw/jbe@1309 271 cursor: default;
bsw/jbe@1309 272 background-color: transparent;
bsw/jbe@1309 273 }
bsw/jbe@1309 274
bsw/jbe@1309 275 &--fab {
bsw/jbe@1309 276 // Bump up specificity by using [disabled] twice.
bsw/jbe@1309 277 &[disabled][disabled],
bsw/jbe@1309 278 &.mdl-button--disabled.mdl-button--disabled {
bsw/jbe@1309 279 background-color: $button-primary-color-disabled;
bsw/jbe@1309 280 color: $button-secondary-color-disabled;
bsw/jbe@1309 281 }
bsw/jbe@1309 282 }
bsw/jbe@1309 283
bsw/jbe@1309 284 &--raised {
bsw/jbe@1309 285 // Bump up specificity by using [disabled] twice.
bsw/jbe@1309 286 &[disabled][disabled],
bsw/jbe@1309 287 &.mdl-button--disabled.mdl-button--disabled {
bsw/jbe@1309 288 background-color: $button-primary-color-disabled;
bsw/jbe@1309 289 color: $button-secondary-color-disabled;
bsw/jbe@1309 290 box-shadow: none;
bsw/jbe@1309 291 }
bsw/jbe@1309 292 }
bsw/jbe@1309 293 &--colored {
bsw/jbe@1309 294 // Bump up specificity by using [disabled] twice.
bsw/jbe@1309 295 &[disabled][disabled],
bsw/jbe@1309 296 &.mdl-button--disabled.mdl-button--disabled {
bsw/jbe@1309 297 color: $button-secondary-color-disabled;
bsw/jbe@1309 298 }
bsw/jbe@1309 299 }
bsw/jbe@1309 300 }
bsw/jbe@1309 301
bsw/jbe@1309 302 // Align icons inside buttons with text
bsw/jbe@1309 303 .mdl-button .material-icons {
bsw/jbe@1309 304 vertical-align: middle;
bsw/jbe@1309 305 }

Impressum / About Us