Import the pebble dev site into devsite/

devsite/source/_sass/elements/search.scss

@@ -0,0 +1,248 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.search {
+  background-color: $white;
+  border-bottom: 1px solid $gray-10;
+  height: $header-height;
+  left: $sidebar-width;
+  padding: $base-font-size / 1.2;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+    padding-left: $hamburger-width;
+  }
+
+  input {
+    -webkit-appearance: textfield;
+    border: 0;
+    box-shadow: none;
+    font-size: $base-font-size * 1.2;
+    padding: $base-font-size / 2;
+    padding-left: 2em;
+    width: 100%;
+
+    @include bp-max ($sidebar-hide-at) {
+      padding-left: 0;
+    }
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+
+    &:before {
+      content: '\f002';
+      font-family: 'FontAwesome';
+    }
+  }
+}
+
+.search__icon {
+  font-size: $base-font-size * 1.2;
+  left: $base-font-size / 0.6;
+  position: absolute;
+  top: $base-font-size / 0.6;
+
+  @include bp-max ($sidebar-hide-at) {
+    display: none;
+  }
+}
+
+.content--narrow .search {
+  left: $sidebar--wide-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}
+
+.content--section-menu .search {
+  left: $sidebar-width + $section-menu-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}
+
+.quicksearch {
+  background-color: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  bottom: 10%;
+  left: $sidebar-width;
+  overflow-y: scroll;
+  padding: 0 1em 1em;
+  position: fixed;
+  right: 0;
+  top: $header-height - 2;
+  z-index: 200;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+
+  h3 {
+    font-size: 1.2 * $base-font-size;
+    margin: 0.5em 0;
+    text-transform: uppercase;
+  }
+
+  ul {
+    margin: 0;
+  }
+}
+
+.quicksearch__block {
+  h3 {
+    color: $white;
+    padding: 0 0.25rem;
+  }
+}
+
+.quicksearch__block--guides {
+  h3 {
+    background-color: $color-guides;
+    color: $base-font-color;
+  }
+}
+
+.quicksearch__block--docs {
+  h3 {
+    background-color: $color-docs;
+  }
+}
+
+.quicksearch__block--community {
+  h3 {
+    background-color: $color-community;
+  }
+}
+
+.quicksearch__block--more{
+  h3 {
+    background-color: $color-more;
+  }
+}
+
+.quicksearch__block--other {
+  h3 {
+    background-color: $color-other;
+  }
+}
+
+.quicksearch__result {
+  margin-bottom: 0.5 * $base-font-size;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.quicksearch__summary {
+  font-size: 0.9 * $base-font-size;
+  line-height: 0.9 * $base-line-height;
+  margin: 0;
+  max-height: 0.9 * $base-line-height;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.search__result__highlight {
+  text-decoration: underline;
+}
+
+.quicksearch__result__tag {
+  background-color: $color-docs;
+  border-radius: 2px;
+  color: #fff;
+  display: inline-block;
+  float: left;
+  font-size: 0.7em;
+  padding: 0.2em 0.3em;
+  margin: 0.1em 0.5em 0.1em 0;
+}
+
+.quicksearch__section {
+  margin: 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  color: $gray-11;
+  font-weight: bold;
+  width: auto;
+  display: table;
+}
+
+.quicksearch__result--active {
+  background-color: $gray-01;
+  border-left: 2px solid $gray-03;
+  border-right: 2px solid $gray-03;
+  margin: -5px -5px 2.5px;
+  padding: 5px;
+}
+
+.quicksearch__no-results {
+  font-size: 3em;
+  font-weight: 300;
+  text-align: center;
+  padding: 1em;
+  color: $gray-09;
+}
+
+.content--narrow .quicksearch {
+  left: $sidebar--wide-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}
+
+.content--section-menu .quicksearch {
+  left: $sidebar-width + $section-menu-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}
+
+#search__blackout {
+  background-color: rgba(0, 0, 0, 0.7);
+  bottom: 0;
+  left: $sidebar-width;
+  position: fixed;
+  right: 0;
+  top: $header-height;
+  z-index: 150;
+}
+
+.content--narrow #search__blackout {
+  left: $sidebar--wide-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}
+
+.content--section-menu #search__blackout {
+  left: $sidebar-width + $section-menu-width;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+  }
+}