/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.9.8 */ /* mixin definition ; sets LTR and RTL within the same style call */ @-webkit-keyframes md-autocomplete-list-out { 0% { -webkit-animation-timing-function: linear; animation-timing-function: linear; } 50% { opacity: 0; height: 40px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { height: 0; opacity: 0; } } @keyframes md-autocomplete-list-out { 0% { -webkit-animation-timing-function: linear; animation-timing-function: linear; } 50% { opacity: 0; height: 40px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { height: 0; opacity: 0; } } @-webkit-keyframes md-autocomplete-list-in { 0% { opacity: 0; height: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { opacity: 0; height: 40px; } 100% { opacity: 1; height: 40px; } } @keyframes md-autocomplete-list-in { 0% { opacity: 0; height: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { opacity: 0; height: 40px; } 100% { opacity: 1; height: 40px; } } md-autocomplete { border-radius: 2px; display: block; height: 40px; position: relative; overflow: visible; min-width: 190px; } md-autocomplete[disabled] input { cursor: not-allowed; } md-autocomplete[md-floating-label] { padding-bottom: 26px; border-radius: 0; background: transparent; height: auto; } md-autocomplete[md-floating-label] md-input-container { padding-bottom: 0; } md-autocomplete[md-floating-label] md-autocomplete-wrap { height: auto; } md-autocomplete[md-floating-label] button { position: absolute; top: auto; bottom: 0; right: 0; width: 30px; height: 30px; } md-autocomplete md-autocomplete-wrap { display: block; position: relative; overflow: visible; height: 40px; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate] { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; transition: none; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate] .md-container { transition: none; top: auto; height: 3px; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate].ng-enter { transition: opacity 0.15s linear; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate].ng-enter.ng-enter-active { opacity: 1; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate].ng-leave { transition: opacity 0.15s linear; } md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode=indeterminate].ng-leave.ng-leave-active { opacity: 0; } md-autocomplete input:not(.md-input) { width: 100%; box-sizing: border-box; border: none; box-shadow: none; padding: 0 15px; font-size: 14px; line-height: 40px; height: 40px; outline: none; background: transparent; } md-autocomplete input:not(.md-input)::-ms-clear { display: none; } md-autocomplete button { position: relative; line-height: 20px; text-align: center; width: 30px; height: 30px; cursor: pointer; border: none; border-radius: 50%; padding: 0; font-size: 12px; background: transparent; margin: auto 5px; } md-autocomplete button:after { content: ''; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); opacity: 0; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } md-autocomplete button:focus { outline: none; } md-autocomplete button:focus:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } md-autocomplete button md-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9); transform: translate3d(-50%, -50%, 0) scale(0.9); } md-autocomplete button md-icon path { stroke-width: 0; } md-autocomplete button.ng-enter { -webkit-transform: scale(0); transform: scale(0); transition: -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out; } md-autocomplete button.ng-enter.ng-enter-active { -webkit-transform: scale(1); transform: scale(1); } md-autocomplete button.ng-leave { transition: -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out; } md-autocomplete button.ng-leave.ng-leave-active { -webkit-transform: scale(0); transform: scale(0); } @media screen and (-ms-high-contrast: active) { md-autocomplete input { border: 1px solid #fff; } md-autocomplete li:focus { color: #fff; } } .md-autocomplete-suggestions { position: absolute; margin: 0; list-style: none; padding: 0; overflow: auto; max-height: 225.5px; z-index: 100; } .md-autocomplete-suggestions li { cursor: pointer; font-size: 14px; overflow: hidden; padding: 0 15px; line-height: 48px; height: 48px; transition: background 0.15s linear; margin: 0; white-space: nowrap; text-overflow: ellipsis; } .md-autocomplete-suggestions li.ng-enter, .md-autocomplete-suggestions li.ng-hide-remove { transition: none; -webkit-animation: md-autocomplete-list-in 0.2s; animation: md-autocomplete-list-in 0.2s; } .md-autocomplete-suggestions li.ng-leave, .md-autocomplete-suggestions li.ng-hide-add { transition: none; -webkit-animation: md-autocomplete-list-out 0.2s; animation: md-autocomplete-list-out 0.2s; } .md-autocomplete-suggestions li:focus { outline: none; } @media screen and (-ms-high-contrast: active) { md-autocomplete, .md-autocomplete-suggestions { border: 1px solid #fff; } }