All files / ship-components-tag-input/src TagContainer.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 114 115 116 117 118 119 120 121 122 123                                                                                                                                                                                                                                                     
body {
    font-family: "lato";
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
/**
 *  <SelectBox />
 */
.container {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
    min-height: 48px;
    display: flex;
    align-items: center;
    margin-top: 14px;
    padding: 5px 5px 5px 0;
    position: relative;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
 
    line-height: 1;
    position: relative;
    &:after,
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.12);
        transition: all 500ms ease;
    }
 
    &:after {
        bottom: -3px;
        width: 0;
        height: 3px;
    }
 
    &:before {
        width: 100%;
        height: 1px;
    }
 
    &.dropdownOpen:after { width: 100%; }
 
    input[type="text"] {
        color: #333;
        z-index: 5;
        outline: 0;
        &::-webkit-input-placeholder  { color: #333 }          /* Chrome/Opera/Safari */
        &::-moz-placeholder,          { color: #333 }          /* Firefox 19+ */
        &:-ms-input-placeholder,      { color: #333 }          /* IE 10+ */
        &:-moz-placeholder,           { color: #333 }          /* Firefox 18- */
    }
    &.darkTheme {
        background-color: #333;
        color: white;
        input[type="text"] {
            color: white;
            &::-webkit-input-placeholder  { color: white }     /* Chrome/Opera/Safari */
            &::-moz-placeholder,          { color: white }     /* Firefox 19+ */
            &:-ms-input-placeholder,      { color: white }     /* IE 10+ */
            &:-moz-placeholder,           { color: white }     /* Firefox 18- */
        }
 
        &:before { background-color: #fff; }
        &.dropdownOpen:after { width: 100%; }
    }
}
 
.container.open {
    border-radius: 2px 2px 0 0;
}
 
/* .container:hover,
.container.open {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} */
 
.dropdownOpen {
    outline: 0;
    color: #2a2a2a;
}
 
.empty {
    outline: 0;
    color: #2a2a2a;
}
 
.toggleBtn {
    font-size: 20px;
}
 
.label {
    font-size: 16px;
    position: absolute;
    color: inherit;
    left: 0;
    top: 16px;
    transition: all 500ms ease;
    z-index: 4;
    line-height: 1;
 
    &.toggleLeftPos,
    &.notFilterable:not(.toggleRightPos) {
        left: 72px;
    }
}
 
.label.offset {
    font-size: 12px;
    top: -7px;
    &.toggleLeftPos,
    &.notFilterable {
        left: 0;
    }
    &.darkTheme {
        color: #333;
    }
}