/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.1.3 */ button.md-button::-moz-focus-inner { border: 0; } .md-button { display: inline-block; position: relative; cursor: pointer; /** Alignment adjustments */ min-height: 36px; min-width: 88px; line-height: 36px; vertical-align: middle; -webkit-box-align: center; -webkit-align-items: center; align-items: center; text-align: center; border-radius: 2px; box-sizing: border-box; /* Reset default button appearance */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; border: 0; /** Custom styling for button */ padding: 0 6px; margin: 6px 8px; background: transparent; color: currentColor; white-space: nowrap; /* Uppercase text content */ text-transform: uppercase; font-weight: 500; font-size: 14px; font-style: inherit; font-variant: inherit; font-family: inherit; text-decoration: none; overflow: hidden; -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .md-dense > .md-button:not(.md-dense-disabled), .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) { min-height: 32px; } .md-dense > .md-button:not(.md-dense-disabled), .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) { line-height: 32px; } .md-dense > .md-button:not(.md-dense-disabled), .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) { font-size: 13px; } .md-button:focus { outline: none; } .md-button:hover, .md-button:focus { text-decoration: none; } .md-button.ng-hide, .md-button.ng-leave { -webkit-transition: none; transition: none; } .md-button.md-cornered { border-radius: 0; } .md-button.md-icon { padding: 0; background: none; } .md-button.md-raised:not([disabled]) { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .md-button.md-icon-button { margin: 0 6px; height: 40px; min-width: 0; line-height: 24px; padding: 8px; width: 40px; border-radius: 50%; } .md-button.md-icon-button .md-ripple-container { border-radius: 50%; background-clip: padding-box; overflow: hidden; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); } .md-button.md-fab { z-index: 20; line-height: 56px; min-width: 0; width: 56px; height: 56px; vertical-align: middle; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); border-radius: 50%; background-clip: padding-box; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-transition-property: background-color, box-shadow, -webkit-transform; transition-property: background-color, box-shadow, -webkit-transform; transition-property: background-color, box-shadow, transform; transition-property: background-color, box-shadow, transform, -webkit-transform; } .md-button.md-fab.md-fab-bottom-right { top: auto; right: 20px; bottom: 20px; left: auto; position: absolute; } .md-button.md-fab.md-fab-bottom-left { top: auto; right: auto; bottom: 20px; left: 20px; position: absolute; } .md-button.md-fab.md-fab-top-right { top: 20px; right: 20px; bottom: auto; left: auto; position: absolute; } .md-button.md-fab.md-fab-top-left { top: 20px; right: auto; bottom: auto; left: 20px; position: absolute; } .md-button.md-fab .md-ripple-container { border-radius: 50%; background-clip: padding-box; overflow: hidden; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); } .md-button.md-fab.md-mini { line-height: 40px; width: 40px; height: 40px; } .md-button.md-fab.ng-hide, .md-button.md-fab.ng-leave { -webkit-transition: none; transition: none; } .md-button:not([disabled]).md-raised.md-focused, .md-button:not([disabled]).md-fab.md-focused { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .md-button:not([disabled]).md-raised:active, .md-button:not([disabled]).md-fab:active { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); } .md-button .md-ripple-container { border-radius: 2px; background-clip: padding-box; overflow: hidden; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); } .md-button.md-icon-button md-icon, button.md-button.md-fab md-icon { display: block; } .md-toast-open-top .md-button.md-fab-top-left, .md-toast-open-top .md-button.md-fab-top-right { -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-transform: translate3d(0, 42px, 0); transform: translate3d(0, 42px, 0); } .md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover, .md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover { -webkit-transform: translate3d(0, 41px, 0); transform: translate3d(0, 41px, 0); } .md-toast-open-bottom .md-button.md-fab-bottom-left, .md-toast-open-bottom .md-button.md-fab-bottom-right { -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-transform: translate3d(0, -42px, 0); transform: translate3d(0, -42px, 0); } .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover, .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover { -webkit-transform: translate3d(0, -43px, 0); transform: translate3d(0, -43px, 0); } .md-button-group { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; } .md-button-group > .md-button { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: block; overflow: hidden; width: 0; border-width: 1px 0px 1px 1px; border-radius: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .md-button-group > .md-button:first-child { border-radius: 2px 0px 0px 2px; } .md-button-group > .md-button:last-child { border-right-width: 1px; border-radius: 0px 2px 2px 0px; } @media screen and (-ms-high-contrast: active) { .md-button.md-raised, .md-button.md-fab { border: 1px solid #fff; } }