| Javier López-Contreras | 6dc18a3 | 2018-12-26 12:40:04 +0100 | [diff] [blame^] | 1 | .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;
|
| 104 | }
|
| 105 |
|
| 106 | .autocomplete-item {
|
| 107 | font-size: 16px;
|
| 108 | padding: 12px 14px;
|
| 109 | cursor: pointer;
|
| 110 | }
|
| 111 |
|
| 112 | .autocomplete-item:hover, .autocomplete-active {
|
| 113 | background: #eee;
|
| 114 | }
|
| 115 |
|
| 116 | .autocomplete-year {
|
| 117 | position: relative;
|
| 118 | z-index: 120;
|
| 119 |
|
| 120 | color: #222;
|
| 121 | }
|
| 122 |
|
| 123 | @media ( max-width : 700px) {
|
| 124 | #dialog {
|
| 125 | width: Calc(100% - 32px) !important;
|
| 126 | height: Calc(100% - 32px) !important;
|
| 127 | margin: 16px;
|
| 128 | }
|
| 129 | #backdrop {
|
| 130 | display: block;
|
| 131 | }
|
| 132 | #min-dialog {
|
| 133 | display: block !important;
|
| 134 | }
|
| 135 | } |