blob: ee8f5785e13d60e7f53319894336190ef37d699a [file] [log] [blame]
Javier López-Contreras6dc18a32018-12-26 12:40:04 +01001.md-google-search__metacontainer {
2 position: absolute;
3 top: 10px;
4 height: 48px;
5 width: 100%;
6 z-index: 100;
7}
8
9.md-google-search__container {
10 display: block;
11 margin-left: auto;
12 margin-right: auto;
13 height: 48px;
14 width: Calc(100% - 66px);
15 max-width: 720px;
16 white-space: nowrap;
17}
18
19.md-google-search {
20 height: 48px;
21 background-color: rgba(245, 245, 245, 1);
22 border: 1px solid rgba(0, 0, 0, 0);
23 -webkit-border-radius: 4px;
24 border-radius: 4px;
25 max-width: 720px;
26 position: relative;
27 -webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
28 transition: background-color 100ms ease-in, width 100ms ease-out;
29}
30
31.md-google-search:focus-within {
32 border: 1px solid rgba(0, 0, 0, 0.45);
33 background-color: rgba(255, 255, 255, 1);
34 -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
35 box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
36}
37
38.md-google-search__search-btn {
39 float: left;
40 background: none;
41 border: none;
42 opacity: .54;
43 outline: none;
44 padding: 0 4px;
45 line-height: 0;
46 color: #212121;
47}
48
49.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
50 padding: 7px;
51 margin: 4px;
52}
53
54.md-google-search__field-container {
55 height: 46px;
56 padding: 0 11px;
57 margin-right: 48px;
58}
59
60.md-google-search__field {
61 border: none;
62 font: normal 16px Roboto, sans-serif;
63 height: 24px;
64 outline: none;
65 padding: 11px 0 11px 16px;
66 width: 100%;
67 background: transparent;
68}
69
70.md-google-search__empty-btn {
71 position: absolute;
72 right: 0;
73 top: 0;
74 background: none;
75 border: none;
76 opacity: .54;
77 outline: none;
78 padding: 0 4px;
79 line-height: 0;
80 color: #212121;
81 cursor: pointer;
82}
83
84/**
85 * Search Box Autocomplete
86 */
87.autocomplete-container {
88 z-index: 110;
89 position: absolute;
90 top: 60px;
91 width: 100%;
92}
93
94.autocomplete-items {
95 display: block;
96 margin-left: auto;
97 margin-right: auto;
98 width: Calc(100% - 66px);
99 max-width: 720px;
100 background-color: white;
101 color: black;
102 box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
103 rgba(255, 255, 255, 0.156863) !important;
avm99963027b5b02018-12-28 02:31:46 +0100104 max-height: 510px;
105 overflow-y: auto;
Javier López-Contreras6dc18a32018-12-26 12:40:04 +0100106}
107
108.autocomplete-item {
109 font-size: 16px;
110 padding: 12px 14px;
111 cursor: pointer;
112}
113
114.autocomplete-item:hover, .autocomplete-active {
115 background: #eee;
116}
117
118.autocomplete-year {
119 position: relative;
120 z-index: 120;
avm99963027b5b02018-12-28 02:31:46 +0100121
Javier López-Contreras6dc18a32018-12-26 12:40:04 +0100122 color: #222;
123}
124
125@media ( max-width : 700px) {
126 #dialog {
127 width: Calc(100% - 32px) !important;
128 height: Calc(100% - 32px) !important;
129 margin: 16px;
130 }
131 #backdrop {
132 display: block;
133 }
134 #min-dialog {
135 display: block !important;
136 }
avm99963027b5b02018-12-28 02:31:46 +0100137}