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: }