# All files / ship-components-tag-input/src Dropdown.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113

    .dropdown {
        display: none;
        position: absolute;
        left: 0;
        top: 50px;
        padding: 0;
        margin-top: 1px;
        background-color: #fff;
        max-height: 400px;
        min-width: 100%;
        overflow-y: auto;
        border-radius: 0 0 2px 2px;
    }

    .dropdown.open {
        display: block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        margin-bottom: 20px;
        /* Making sure it's always visible */
        z-index: 1000;
    }

    .no-results,
    .dropdown-option-group-title {
        height: 32px;
        line-height: 32px;
        color: rgba(66,66,66,0.56);
        font-weight: 400;
        font-size: 14px;
        padding-left: 24px;
    }

    .option {
        line-height: 1.618;

        padding: 8px 24px;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
        transition: 0.3s ease all;

        display: flex;
        align-items: center;
        text-align: left;
        word-break: break-all;
        overflow-wrap: break-word;

        &:hover {
            background-color: rgba(21, 101, 192, 0.44);
            color: #fff;
        }

        &.highlight {
            background-color: rgba(21, 101, 192, 0.66);
            color: #fff;
        }

        &.darkTheme {
            background-color: #333;
            color: #fff;
            > option-title {
               color: white;
            }
             &:hover {
                background-color: #eeeeee;
                color: #333;
            }
            &.highlight {
                background-color: #FFFFFF;
                color: #333;
            }
        }
    }

    .left-toggle .option,
    .left-toggle .no-results {
        padding-left: 20px;
    }

    .new-option {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
    }
    .add-new-tag {
        display: flex;
        align-items: center;
        font-weight: 700;
    }

    .material-icons {
    font-size: 14px;
    }

    .option-icon {
        margin-right: 8px;
        color: rgba(33,33,33,.80);
    }

    .option-body {
        display: block;
        color: rgba(0,0,0,0.56);
        font-family: "Lato";
        font-weight: 400;
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
    }

    .highlight {

    }