1// Copyright (C) 2018 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14@mixin omnibox-width() { 15 width: 90%; 16 max-width: 600px; 17} 18 19.topbar { 20 grid-area: topbar; 21 position: relative; 22 z-index: 3; 23 overflow: visible; 24 background-color: hsl(215, 1%, 95%); 25 box-shadow: 0px -3px 14px 2px #bbb; 26 line-height: var(--topbar-height); 27 .omnibox { 28 @include omnibox-width(); 29 @include transition(0.25s); 30 display: grid; 31 grid-template-areas: "icon input"; 32 grid-template-columns: 34px auto; 33 border-radius: 20px; 34 background-color: #fcfcfc; 35 border: 0; 36 margin: 6px auto 0 auto; 37 height: 36px; 38 line-height: 36px; 39 &:before { 40 @include material-icon('search'); 41 vertical-align: middle; 42 font-size: 32px; 43 margin: 5px; 44 color: #aaa; 45 grid-area: icon; 46 } 47 input { 48 grid-area: input; 49 border: 0; 50 padding: 0 10px; 51 font-size: 18px; 52 font-family: 'Google Sans'; 53 color: #666; 54 background-color: transparent; 55 &:focus { 56 outline: none; 57 } 58 &::placeholder { 59 color: #b4b7ba; 60 font-family: 'Raleway'; 61 font-weight: 400; 62 } 63 } 64 &.command-mode { 65 // background-color: #354252; 66 background-color: #111; 67 border-radius: 0; 68 width: 100%; 69 max-width: 100%; 70 margin-top: 0; 71 border-left: 1px solid #404854; 72 height: var(--topbar-height); 73 input { 74 color: #9ddc67; 75 font-family: var(--monospace-font); 76 padding-left: 0; 77 } 78 &:before { 79 content: 'attach_money'; 80 color: #9ddc67; 81 font-size: 26px; 82 padding-top: 5px; 83 } 84 } 85 &.message-mode { 86 background-color: hsl(0, 0%, 89%); 87 border-radius: 4px; 88 input::placeholder { 89 font-weight: 400; 90 font-family: var(--monospace-font); 91 color: hsl(213, 40%, 50%); 92 } 93 &:before { 94 content: 'bubble_chart'; 95 } 96 } 97 } 98 .omnibox-results { 99 @include transition(0.25s); 100 @include omnibox-width(); 101 position: absolute; 102 z-index: 1; 103 max-height: 250px; 104 top: calc(var(--topbar-height) + 2px); 105 left: 0; 106 right: 0; 107 margin: auto; 108 background-color: hsla(213, 0%, 95%, 0.99); 109 box-shadow: 0 3px 9px #ccc; 110 border-radius: 0 0 5px 5px; 111 >* { 112 height: 24px; 113 line-height: 24px; 114 padding: 0 10px; 115 font-family: 'Raleway', sans-serif; 116 font-size: 14px; 117 vertical-align: middle; 118 color: #666; 119 border-bottom: 1px solid #eee; 120 &:hover { 121 background-color: hsl(213, 20%, 92%); 122 } 123 &.selected { 124 background-color: hsl(213, 40%, 90%); 125 } 126 } 127 } 128 .progress { 129 position: absolute; 130 bottom: 0; 131 height: 1px; 132 width: 100%; 133 &:before { 134 content: ''; 135 position: absolute; 136 background-color: hsl(219, 50%, 50%); 137 top: 0; 138 left: 0; 139 bottom: 0; 140 will-change: left, right; 141 animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 142 } 143 &:after { 144 content: ''; 145 position: absolute; 146 background-color: hsl(219, 50%, 50%); 147 top: 0; 148 left: 0; 149 bottom: 0; 150 will-change: left, right; 151 animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 152 animation-delay: 1.15s; 153 } 154 } 155 @keyframes indeterminate { 156 0% { 157 left: -35%; 158 right: 100%; 159 } 160 60% { 161 left: 100%; 162 right: -90%; 163 } 164 100% { 165 left: 100%; 166 right: -90%; 167 } 168 } 169 @keyframes indeterminate-short { 170 0% { 171 left: -35%; 172 right: 100%; 173 } 174 60% { 175 left: 100%; 176 right: -90%; 177 } 178 100% { 179 left: 100%; 180 right: -90%; 181 } 182 } 183} 184