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: .mdl-chip {
bsw/jbe@1309:     height: $chip-height;
bsw/jbe@1309:     font-family: $preferred_font;
bsw/jbe@1309:     line-height: $chip-height;
bsw/jbe@1309:     padding: 0 12px;
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     border-radius: $chip-height / 2;
bsw/jbe@1309:     background-color: $chip-bg-color;
bsw/jbe@1309:     display: inline-block;
bsw/jbe@1309:     color: $text-color-primary;
bsw/jbe@1309:     margin: 2px 0;
bsw/jbe@1309:     font-size: 0;
bsw/jbe@1309:     white-space: nowrap;
bsw/jbe@1309: 
bsw/jbe@1309:     &__text {
bsw/jbe@1309:         font-size: $chip-font-size;
bsw/jbe@1309:         vertical-align: middle;
bsw/jbe@1309:         display: inline-block;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &__action {
bsw/jbe@1309:         height: 24px;
bsw/jbe@1309:         width: 24px;
bsw/jbe@1309:         background: transparent;
bsw/jbe@1309:         opacity: 0.54;
bsw/jbe@1309:         display: inline-block;
bsw/jbe@1309:         cursor: pointer;
bsw/jbe@1309:         text-align: center;
bsw/jbe@1309:         vertical-align: middle;
bsw/jbe@1309:         padding: 0;
bsw/jbe@1309:         margin: 0 0 0 4px;
bsw/jbe@1309:         font-size: $chip-font-size;
bsw/jbe@1309:         text-decoration: none;
bsw/jbe@1309:         color: $text-color-primary;
bsw/jbe@1309:         border: none;
bsw/jbe@1309:         outline: none;
bsw/jbe@1309:         overflow: hidden;
bsw/jbe@1309:     }
bsw/jbe@1309:     
bsw/jbe@1309:     &__contact {
bsw/jbe@1309:         height: $chip-height;
bsw/jbe@1309:         width: $chip-height;
bsw/jbe@1309:         border-radius: $chip-height / 2;
bsw/jbe@1309:         display: inline-block;
bsw/jbe@1309:         vertical-align: middle;
bsw/jbe@1309:         margin-right: 8px;
bsw/jbe@1309:         overflow: hidden;
bsw/jbe@1309:         text-align: center;
bsw/jbe@1309:         font-size: 18px;
bsw/jbe@1309:         line-height: 32px;
bsw/jbe@1309:     }
bsw/jbe@1309:     
bsw/jbe@1309:     &:focus {
bsw/jbe@1309:         outline: 0;
bsw/jbe@1309:         @include shadow-2dp();
bsw/jbe@1309:     }
bsw/jbe@1309:     
bsw/jbe@1309:     &:active {
bsw/jbe@1309:         background-color: $chip-bg-active-color;
bsw/jbe@1309:     }
bsw/jbe@1309:     
bsw/jbe@1309:     &--deletable {
bsw/jbe@1309:         padding-right: 4px;
bsw/jbe@1309:     }
bsw/jbe@1309:     
bsw/jbe@1309:     &--contact {
bsw/jbe@1309:         padding-left: 0;
bsw/jbe@1309:     }
bsw/jbe@1309: }