ng2-typensearch/styles.css at master · asotog/ng2-typensearch · GitHub

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
typensearch {
    display: block;
    position: relative;
}

/*
 *  Input Field
 *
 *
 *
 *
 */
.tns input[type="text"] {
    border: 1px solid #DEDDDD;
    border-right: none;
    font-size: 12px;
    padding: 5px;
    transition: 0.5s border;
}
.tns input[type="text"]:hover {
    border: 1px solid #ABABAB;
    border-right: none;
}
.tns input[type="text"]:focus {
    border: 1px solid #4BA3D2;
    border-right: none;
    outline: none;
}


/*
 *  Action/Submit button
 *
 *
 *
 *
 */
.tns button {
    background: #4BA3D2;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 12px;
    padding: 6px;
}
.tns button:focus {
    outline: none;
}


/*
 *  Suggestions Dropdown
 *
 *
 *
 *
 */
.tns-suggestions {
    background: #FFF;
    box-shadow: 0px 2px 10px #CCCCCC;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: .5s all;
    visibility: hidden;
    width: 100%;
    z-index: 2;
}
.tns-suggestions.has-suggestions {
    opacity: 1;
    visibility: visible;
}
.tns-suggestions ul {
    border: 1px solid #CCCCCC;
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.tns-suggestions ul,
.tns-suggestions ul li {
    list-style: none;
}
.tns-suggestions ul li {
    border-bottom: 1px solid #CCCCCC;
    font-size: 12px;
    padding: 5px;
}


/*
 *  Selectable Suggestions Dropdown
 *
 *
 *
 *
 */
.tns-suggestions.is-selectable ul li {
    cursor: pointer;
}
.tns-suggestions.is-selectable ul li:hover,
.tns-suggestions.is-selectable ul li.hover {
    background: #4BA3D2;
    background: rgba(75, 163, 210, 0.49);
}