Complete Header Section

amit712singhal · Jun 26, 2024 · 450c889 · 450c889
1 parent f7c20ed
commit 450c889
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 2 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -255,8 +255,157 @@ body {
   border-radius: var(--radius-pill);
 }
 
+.btn-primary .span {
+  font-weight: var(--weight-semiBold);
+}
+
+.btn-primary[disabled] {
+  background-color: var(--outline);
+  color: var(--on-surface-variant);
+  cursor: not-allowed;
+}
+.btn-primary[disabled]::before {
+  display: none;
+}
+
 /* #HEADER */
 
+.header .btn-primary .span {
+  display: none;
+}
+
+.logo img {
+  width: 150px;
+}
+
+.header .container,
+.header-actions {
+  display: flex;
+  align-items: center;
+}
+
+.header .container {
+  justify-content: space-between;
+}
+
+.header-actions {
+  gap: 16px;
+}
+
+.header .btn-primary {
+  padding-inline: 12px;
+}
+
+.search-view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100svh;
+  background-color: var(--surface);
+  color: var(--on-surface);
+  clip-path: circle(4% at calc(100% - 102px) 5%);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 4;
+  transition: clip-path 500ms ease;
+}
+
+.search-view.active {
+  opacity: 1;
+  visibility: visible;
+  clip-path: circle(130% at 73% 5%);
+}
+
+.search-wrapper {
+  position: relative;
+  border-block-end: 1px solid var(--outline);
+}
+
+.search-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--on-surface);
+  border-block-start-color: transparent;
+  border-radius: var(--radius-circle);
+  animation: loading 500ms linear infinite;
+  display: none;
+}
+
+@keyframes loading {
+  0% {
+    transform: translateY(-50%) rotate(0);
+  }
+  100% {
+    transform: translateY(-50%) rotate(1turn);
+  }
+}
+
+.search-wrapper:has(.searching)::before {
+  display: block;
+}
+
+.search-field {
+  height: 80px;
+  line-height: 80px;
+  padding-inline: 56px 16px;
+  outline: none;
+}
+
+.search-field::placeholder {
+  color: var(--on-surface-variant-2);
+}
+
+.search-field::-webkit-search-cancel-button {
+  display: none;
+}
+
+.search-wrapper .leading-icon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translate(-50%, -50%);
+}
+
+.search-wrapper > .m-icon {
+  display: none;
+}
+
+.search-wrapper .icon-btn {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.search-view .view-list {
+  padding-block: 8px 16px;
+}
+
+.search-view .view-item {
+  position: relative;
+  height: 56px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding-inline: 16px 24px;
+}
+
+.search-view .view-item :is(.m-icon, .item-subtitle) {
+  color: var(--on-surface-variant);
+}
+
+.search-view .view-item .item-link {
+  position: absolute;
+  inset: 0;
+  box-shadow: none;
+}
+
 /* #CURRENT WEATHER */
 
 /* #HIGHLIGHTS */

diff --git a/index.html b/index.html
@@ -35,11 +35,12 @@
         <a href="#" class="logo"
           ><img
             src="./assets/images/logo.png"
-            width="300"
+            width="360"
             height="50"
             alt="logo"
           />
         </a>
+
         <div class="search-view" data-search-view>
           <div class="search-wrapper">
             <input
@@ -72,6 +73,7 @@
             </ul>
           </div>
         </div>
+
         <div class="header-actions">
           <button
             class="icon-btn has-state"
@@ -84,7 +86,6 @@
             href="#/current-location"
             class="btn-primary has-state"
             data-current-location-btn
-            disabled
           >
             <span class="m-icon">my_location</span>
             <span class="span">Current Location</span>