root / snf-cyclades-app / synnefo / ui / new_ui / ui / stylesheets / ExpandingSearchBar / component.css @ 656c135b
History | View | Annotate | Download (2.3 kB)
1 |
/* Search icon by IcoMoon, made with http://icomoon.io/app/
|
---|---|
2 |
@font-face {
|
3 |
font-family: 'icomoon';
|
4 |
src:url('../../fonts/icomoon/icomoon.eot');
|
5 |
src:url('../../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
|
6 |
url('../../fonts/icomoon/icomoon.woff') format('woff'),
|
7 |
url('../../fonts/icomoon/icomoon.ttf') format('truetype'),
|
8 |
url('../../fonts/icomoon/icomoon.svg#icomoon') format('svg');
|
9 |
font-weight: normal;
|
10 |
font-style: normal;
|
11 |
}
|
12 |
*/
|
13 |
.sb-search {
|
14 |
position: relative; |
15 |
margin-top: 10px; |
16 |
width: 0%; |
17 |
min-width: 60px; |
18 |
height: 60px; |
19 |
float: right; |
20 |
overflow: hidden; |
21 |
-webkit-transition: width 0.3s; |
22 |
-moz-transition: width 0.3s; |
23 |
transition: width 0.3s; |
24 |
-webkit-backface-visibility: hidden; |
25 |
} |
26 |
|
27 |
.sb-search-input {
|
28 |
position: absolute; |
29 |
top: 0; |
30 |
right: 0; |
31 |
border: none; |
32 |
outline: none; |
33 |
background: #fff; |
34 |
width: 100%; |
35 |
height: 60px; |
36 |
margin: 0; |
37 |
z-index: 10; |
38 |
padding: 20px 65px 20px 20px; |
39 |
font-family: inherit; |
40 |
font-size: 20px; |
41 |
color: #2c3e50; |
42 |
} |
43 |
|
44 |
.sb-search-input::-webkit-input-placeholder { |
45 |
color: #efb480; |
46 |
} |
47 |
|
48 |
.sb-search-input:-moz-placeholder { |
49 |
color: #efb480; |
50 |
} |
51 |
|
52 |
.sb-search-input::-moz-placeholder { |
53 |
color: #efb480; |
54 |
} |
55 |
|
56 |
.sb-search-input:-ms-input-placeholder { |
57 |
color: #efb480; |
58 |
} |
59 |
|
60 |
.sb-icon-search,
|
61 |
.sb-search-submit {
|
62 |
width: 60px; |
63 |
height: 60px; |
64 |
display: block; |
65 |
position: absolute; |
66 |
right: 0; |
67 |
top: 0; |
68 |
padding: 0; |
69 |
margin: 0; |
70 |
line-height: 60px; |
71 |
text-align: center; |
72 |
cursor: pointer; |
73 |
} |
74 |
|
75 |
.sb-search-submit {
|
76 |
background: #fff; /* IE needs this */ |
77 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ |
78 |
filter: alpha(opacity=0); /* IE 5-7 */ |
79 |
opacity: 0; |
80 |
color: transparent; |
81 |
border: none; |
82 |
outline: none; |
83 |
z-index: -1; |
84 |
} |
85 |
|
86 |
.sb-icon-search {
|
87 |
color: #fff; |
88 |
background: #e67e22; |
89 |
z-index: 90; |
90 |
font-size: 22px; |
91 |
/* font-family: 'icomoon'; */
|
92 |
speak: none; |
93 |
font-style: normal; |
94 |
font-weight: normal; |
95 |
font-variant: normal; |
96 |
text-transform: none; |
97 |
-webkit-font-smoothing: antialiased; |
98 |
} |
99 |
|
100 |
/*.sb-icon-search:before {
|
101 |
content: "\e000";
|
102 |
}
|
103 |
*/
|
104 |
/* Open state */
|
105 |
.sb-search.sb-search-open, |
106 |
.no-js .sb-search { |
107 |
width: 100%; |
108 |
} |
109 |
|
110 |
.sb-search.sb-search-open .sb-icon-search, |
111 |
.no-js .sb-search .sb-icon-search { |
112 |
background: #da6d0d; |
113 |
color: #fff; |
114 |
z-index: 11; |
115 |
} |
116 |
|
117 |
.sb-search.sb-search-open .sb-search-submit, |
118 |
.no-js .sb-search .sb-search-submit { |
119 |
z-index: 90; |
120 |
} |