app bar shadow

janfaracik · Jan 8, 2025 · 814354c · 814354c
1 parent c1c7cff
commit 814354c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss
@@ -94,6 +94,13 @@ $semantics: (
     from var(--text-color) 96.8% 0.005 h / 0.8
   );
 
+  // App bar
+  --bottom-app-bar-shadow: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 7.5%,
+    transparent
+  );
+
   // Alert call outs
   --alert-success-text-color: var(--success-color);
   --alert-success-bg-color: color-mix(
@@ -171,11 +178,10 @@ $semantics: (
   --btn-link-bg--hover: var(--very-light-grey);
   --btn-link-color--active: var(--primary-active);
   --btn-link-bg--active: var(--light-grey);
-
-
   --jenkins-border-color: color-mix(in sRGB, currentColor 1.5%, transparent);
   --jenkins-border-width: 1.5px;
-  --jenkins-border: var(--jenkins-border-width) solid var(--jenkins-border-color);
+  --jenkins-border: var(--jenkins-border-width) solid
+    var(--jenkins-border-color);
   //--jenkins-border: var(--jenkins-border-width) solid var(--red);
   // hsla(240, 25%, 75%, 0.25)
 
@@ -287,7 +293,11 @@ $semantics: (
   // Tab bar
   --tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
   --tabs-item-background: transparent;
-  --tabs-item-foreground: color-mix(in srgb, var(--text-color-secondary), var(--text-color));
+  --tabs-item-foreground: color-mix(
+    in sRGB,
+    var(--text-color-secondary),
+    var(--text-color)
+  );
   --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
   --tabs-item-background--active: rgb(0 0 0 / 0.1);

diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss
@@ -132,7 +132,7 @@
     top: -30px;
     left: 0;
     right: 0;
-    background: linear-gradient(transparent, rgba(#556, 0.075) 110%);
+    background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%);
     max-width: 100%;
     height: 30px;
     opacity: 0;

diff --git a/src/main/scss/components/_tabs.scss b/src/main/scss/components/_tabs.scss
@@ -44,7 +44,8 @@ $border-radius: 100px;
   font-weight: 400;
   min-width: 3.75rem;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     inset: 2px;
   }
 }
@@ -74,7 +75,8 @@ $border-radius: 100px;
     display: none;
   }
 
-  &::before, &::after {
+  &::before,
+  &::after {
     inset: 0;
   }
 }

diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss
@@ -158,7 +158,7 @@
     .jenkins-search__input {
       padding: 0 0.5rem 0 45px;
     }
-    
+
     /* stylelint-disable-next-line media-query-no-invalid */
     @media (min-width: breakpoints.$tablet-breakpoint) {
       max-width: 50vw;