third_party/ot-br-posix/repo/third_party/mdl/repo/src/chip/_chip.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18 @import "../mixins";
  19
  20 .mdl-chip {
  21     height: $chip-height;
  22     font-family: $preferred_font;
  23     line-height: $chip-height;
  24     padding: 0 12px;
  25     border: 0;
  26     border-radius: $chip-height / 2;
  27     background-color: $chip-bg-color;
  28     display: inline-block;
  29     color: $text-color-primary;
  30     margin: 2px 0;
  31     font-size: 0;
  32     white-space: nowrap;
  33
  34     &__text {
  35         font-size: $chip-font-size;
  36         vertical-align: middle;
  37         display: inline-block;
  38     }
  39
  40     &__action {
  41         height: 24px;
  42         width: 24px;
  43         background: transparent;
  44         opacity: 0.54;
  45         display: inline-block;
  46         cursor: pointer;
  47         text-align: center;
  48         vertical-align: middle;
  49         padding: 0;
  50         margin: 0 0 0 4px;
  51         font-size: $chip-font-size;
  52         text-decoration: none;
  53         color: $text-color-primary;
  54         border: none;
  55         outline: none;
  56         overflow: hidden;
  57     }
  58
  59     &__contact {
  60         height: $chip-height;
  61         width: $chip-height;
  62         border-radius: $chip-height / 2;
  63         display: inline-block;
  64         vertical-align: middle;
  65         margin-right: 8px;
  66         overflow: hidden;
  67         text-align: center;
  68         font-size: 18px;
  69         line-height: 32px;
  70     }
  71
  72     &:focus {
  73         outline: 0;
  74         @include shadow-2dp();
  75     }
  76
  77     &:active {
  78         background-color: $chip-bg-active-color;
  79     }
  80
  81     &--deletable {
  82         padding-right: 4px;
  83     }
  84
  85     &--contact {
  86         padding-left: 0;
  87     }
  88 }