bsw/jbe@1309: /** bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: bsw/jbe@1309: @import "../variables"; bsw/jbe@1309: @import "../mixins"; bsw/jbe@1309: bsw/jbe@1309: // The button component. Defaults to a flat button. bsw/jbe@1309: .mdl-button { bsw/jbe@1309: background: transparent; bsw/jbe@1309: border: none; bsw/jbe@1309: border-radius: $button-border-radius; bsw/jbe@1309: color: $button-secondary-color; bsw/jbe@1309: position: relative; bsw/jbe@1309: height: $button-height; bsw/jbe@1309: margin: 0; bsw/jbe@1309: min-width: $button-min-width; bsw/jbe@1309: padding: 0 $button-padding; bsw/jbe@1309: display: inline-block; bsw/jbe@1309: @include typo-button(); bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: will-change: box-shadow; bsw/jbe@1309: transition: box-shadow 0.2s $animation-curve-fast-out-linear-in, bsw/jbe@1309: background-color 0.2s $animation-curve-default, bsw/jbe@1309: color 0.2s $animation-curve-default; bsw/jbe@1309: outline: none; bsw/jbe@1309: cursor: pointer; bsw/jbe@1309: text-decoration: none; bsw/jbe@1309: text-align: center; bsw/jbe@1309: line-height: $button-height; bsw/jbe@1309: vertical-align: middle; bsw/jbe@1309: bsw/jbe@1309: &::-moz-focus-inner { bsw/jbe@1309: border: 0; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:hover { bsw/jbe@1309: background-color: $button-hover-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: background-color: $button-focus-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:active { bsw/jbe@1309: background-color: $button-active-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &.mdl-button--colored { bsw/jbe@1309: color: $button-primary-color-alt; bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: background-color: $button-focus-color-alt; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: input.mdl-button[type="submit"] { bsw/jbe@1309: -webkit-appearance:none; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Raised buttons bsw/jbe@1309: .mdl-button--raised { bsw/jbe@1309: background: $button-primary-color; bsw/jbe@1309: @include shadow-2dp(); bsw/jbe@1309: bsw/jbe@1309: &:active { bsw/jbe@1309: @include shadow-4dp(); bsw/jbe@1309: background-color: $button-active-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: @include focus-shadow(); bsw/jbe@1309: background-color: $button-active-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &.mdl-button--colored { bsw/jbe@1309: background: $button-primary-color-alt; bsw/jbe@1309: color: $button-secondary-color-alt; bsw/jbe@1309: bsw/jbe@1309: &:hover { bsw/jbe@1309: background-color: $button-hover-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:active { bsw/jbe@1309: background-color: $button-active-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: background-color: $button-active-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: & .mdl-ripple { bsw/jbe@1309: background: $button-ripple-color-alt; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: bsw/jbe@1309: // FABs bsw/jbe@1309: .mdl-button--fab { bsw/jbe@1309: border-radius: 50%; bsw/jbe@1309: font-size: $button-fab-font-size; bsw/jbe@1309: height: $button-fab-size; bsw/jbe@1309: margin: auto; bsw/jbe@1309: min-width: $button-fab-size; bsw/jbe@1309: width: $button-fab-size; bsw/jbe@1309: padding: 0; bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: background: $button-primary-color; bsw/jbe@1309: 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: position: relative; bsw/jbe@1309: line-height: normal; bsw/jbe@1309: bsw/jbe@1309: & .material-icons { bsw/jbe@1309: position: absolute; bsw/jbe@1309: top: 50%; bsw/jbe@1309: left: 50%; bsw/jbe@1309: transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2); bsw/jbe@1309: line-height: $button-fab-font-size; bsw/jbe@1309: width: $button-fab-font-size; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &.mdl-button--mini-fab { bsw/jbe@1309: height: $button-fab-size-mini; bsw/jbe@1309: min-width: $button-fab-size-mini; bsw/jbe@1309: width: $button-fab-size-mini; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: & .mdl-button__ripple-container { bsw/jbe@1309: border-radius: 50%; bsw/jbe@1309: // Fixes clipping bug in Safari. bsw/jbe@1309: -webkit-mask-image: -webkit-radial-gradient(circle, white, black); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:active { bsw/jbe@1309: @include shadow-4dp(); bsw/jbe@1309: background-color: $button-active-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: @include focus-shadow(); bsw/jbe@1309: background-color: $button-active-color; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &.mdl-button--colored { bsw/jbe@1309: background: $button-fab-color-alt; bsw/jbe@1309: color: $button-fab-text-color-alt; bsw/jbe@1309: bsw/jbe@1309: &:hover { bsw/jbe@1309: background-color: $button-fab-hover-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:focus:not(:active) { bsw/jbe@1309: background-color: $button-fab-active-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &:active { bsw/jbe@1309: background-color: $button-fab-active-color-alt; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: & .mdl-ripple { bsw/jbe@1309: background: $button-fab-ripple-color-alt; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: bsw/jbe@1309: // Icon buttons bsw/jbe@1309: .mdl-button--icon { bsw/jbe@1309: border-radius: 50%; bsw/jbe@1309: font-size: $button-fab-font-size; bsw/jbe@1309: height: $button-icon-size; bsw/jbe@1309: margin-left: 0; bsw/jbe@1309: margin-right: 0; bsw/jbe@1309: min-width: $button-icon-size; bsw/jbe@1309: width: $button-icon-size; bsw/jbe@1309: padding: 0; bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: color: inherit; bsw/jbe@1309: line-height: normal; bsw/jbe@1309: bsw/jbe@1309: & .material-icons { bsw/jbe@1309: position: absolute; bsw/jbe@1309: top: 50%; bsw/jbe@1309: left: 50%; bsw/jbe@1309: transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2); bsw/jbe@1309: line-height: $button-fab-font-size; bsw/jbe@1309: width: $button-fab-font-size; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &.mdl-button--mini-icon { bsw/jbe@1309: height: $button-icon-size-mini; bsw/jbe@1309: min-width: $button-icon-size-mini; bsw/jbe@1309: width: $button-icon-size-mini; bsw/jbe@1309: bsw/jbe@1309: & .material-icons { bsw/jbe@1309: top: ($button-icon-size-mini - $button-fab-font-size) / 2; bsw/jbe@1309: left: ($button-icon-size-mini - $button-fab-font-size) / 2; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: & .mdl-button__ripple-container { bsw/jbe@1309: border-radius: 50%; bsw/jbe@1309: // Fixes clipping bug in Safari. bsw/jbe@1309: -webkit-mask-image: -webkit-radial-gradient(circle, white, black); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: bsw/jbe@1309: // Ripples bsw/jbe@1309: .mdl-button__ripple-container { bsw/jbe@1309: display: block; bsw/jbe@1309: height: 100%; bsw/jbe@1309: left: 0px; bsw/jbe@1309: position: absolute; bsw/jbe@1309: top: 0px; bsw/jbe@1309: width: 100%; bsw/jbe@1309: z-index: 0; bsw/jbe@1309: overflow: hidden; bsw/jbe@1309: bsw/jbe@1309: .mdl-button[disabled] & .mdl-ripple, bsw/jbe@1309: .mdl-button.mdl-button--disabled & .mdl-ripple { bsw/jbe@1309: background-color: transparent; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Colorized buttons bsw/jbe@1309: bsw/jbe@1309: .mdl-button--primary.mdl-button--primary { bsw/jbe@1309: color: $button-primary-color-alt; bsw/jbe@1309: & .mdl-ripple { bsw/jbe@1309: background: $button-secondary-color-alt; bsw/jbe@1309: } bsw/jbe@1309: &.mdl-button--raised, &.mdl-button--fab { bsw/jbe@1309: color: $button-secondary-color-alt; bsw/jbe@1309: background-color: $button-primary-color-alt; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: .mdl-button--accent.mdl-button--accent { bsw/jbe@1309: color: $button-fab-color-alt; bsw/jbe@1309: & .mdl-ripple { bsw/jbe@1309: background: $button-fab-text-color-alt; bsw/jbe@1309: } bsw/jbe@1309: &.mdl-button--raised, &.mdl-button--fab { bsw/jbe@1309: color: $button-fab-text-color-alt; bsw/jbe@1309: background-color: $button-fab-color-alt; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Disabled buttons bsw/jbe@1309: bsw/jbe@1309: .mdl-button { bsw/jbe@1309: // Bump up specificity by using [disabled] twice. bsw/jbe@1309: &[disabled][disabled], bsw/jbe@1309: &.mdl-button--disabled.mdl-button--disabled { bsw/jbe@1309: color: $button-secondary-color-disabled; bsw/jbe@1309: cursor: default; bsw/jbe@1309: background-color: transparent; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &--fab { bsw/jbe@1309: // Bump up specificity by using [disabled] twice. bsw/jbe@1309: &[disabled][disabled], bsw/jbe@1309: &.mdl-button--disabled.mdl-button--disabled { bsw/jbe@1309: background-color: $button-primary-color-disabled; bsw/jbe@1309: color: $button-secondary-color-disabled; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: &--raised { bsw/jbe@1309: // Bump up specificity by using [disabled] twice. bsw/jbe@1309: &[disabled][disabled], bsw/jbe@1309: &.mdl-button--disabled.mdl-button--disabled { bsw/jbe@1309: background-color: $button-primary-color-disabled; bsw/jbe@1309: color: $button-secondary-color-disabled; bsw/jbe@1309: box-shadow: none; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: &--colored { bsw/jbe@1309: // Bump up specificity by using [disabled] twice. bsw/jbe@1309: &[disabled][disabled], bsw/jbe@1309: &.mdl-button--disabled.mdl-button--disabled { bsw/jbe@1309: color: $button-secondary-color-disabled; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Align icons inside buttons with text bsw/jbe@1309: .mdl-button .material-icons { bsw/jbe@1309: vertical-align: middle; bsw/jbe@1309: }