github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_chips.scss (about)

     1  .chip {
     2    display: inline-block;
     3    height: 32px;
     4    font-size: 13px;
     5    font-weight: 500;
     6    color: rgba(0,0,0,.6);
     7    line-height: 32px;
     8    padding: 0 12px;
     9    border-radius: 16px;
    10    background-color: $chip-bg-color;
    11    margin-bottom: $chip-margin;
    12    margin-right: $chip-margin;
    13  
    14    > img {
    15      float: left;
    16      margin: 0 8px 0 -12px;
    17      height: 32px;
    18      width: 32px;
    19      border-radius: 50%;
    20    }
    21  
    22    .close {
    23      cursor: pointer;
    24      float: right;
    25      font-size: 16px;
    26      line-height: 32px;
    27      padding-left: 8px;
    28    }
    29  }
    30  
    31  .chips {
    32    border: none;
    33    border-bottom: 1px solid $chip-border-color;
    34    box-shadow: none;
    35    margin: $input-margin;
    36    min-height: 45px;
    37    outline: none;
    38    transition: all .3s;
    39  
    40    &.focus {
    41      border-bottom: 1px solid $chip-selected-color;
    42      box-shadow: 0 1px 0 0 $chip-selected-color;
    43    }
    44  
    45    &:hover {
    46      cursor: text;
    47    }
    48  
    49    .chip.selected {
    50      background-color: $chip-selected-color;
    51      color: #fff;
    52    }
    53  
    54    .input {
    55      background: none;
    56      border: 0;
    57      color: rgba(0,0,0,.6);
    58      display: inline-block;
    59      font-size: $input-font-size;
    60      height: $input-height;
    61      line-height: 32px;
    62      outline: 0;
    63      margin: 0;
    64      padding: 0 !important;
    65      width: 120px !important;
    66    }
    67  
    68    .input:focus {
    69      border: 0 !important;
    70      box-shadow: none !important;
    71    }
    72  
    73    // Autocomplete
    74    .autocomplete-content {
    75      margin-top: 0;
    76    }
    77  }
    78  
    79  // Form prefix
    80  .prefix ~ .chips {
    81    margin-left: 3rem;
    82    width: 92%;
    83    width: calc(100% - 3rem);
    84  }
    85  .chips:empty ~ label  {
    86    font-size: 0.8rem;
    87    transform: translateY(-140%);
    88  }