feat: Add gradient styles

LekoArts · Jan 21, 2024 · 5d15b21 · 5d15b21
1 parent c63ce4a
commit 5d15b21
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/lib/button/Primary.svelte b/src/lib/button/Primary.svelte
@@ -25,20 +25,42 @@
     vertical-align: middle;
     text-decoration: none;
     border-radius: var(--space-2xs);
-    background: var(--color-9);
     padding: var(--space-3xs-2xs) var(--space-xs-s);
     border: 1px solid var(--color-7);
     color: var(--color-0);
     box-shadow: var(--shadow-elevation-low);
     line-height: 1.25;
     transition: all .3s cubic-bezier(.73,.26,.42,1.24);
     text-shadow: 0px 2px 6px var(--color-4);
+    overflow: hidden;
+    background-color: transparent;
+
+    &:before, &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(0deg, var(--color-7) 0%, var(--color-9) 18%, var(--color-9) 83%, var(--color-10) 100%);
+      z-index: -1;
+      transition: all .3s cubic-bezier(.73,.26,.42,1.24);
+    }
+
+    &:after {
+      opacity: 0;
+      background-image: linear-gradient(0deg, var(--color-6) 0%, var(--color-8) 18%, var(--color-8) 83%, var(--color-10) 100%);
+    }
 
     &:hover {
-      background: var(--color-8);
       cursor: pointer;
       box-shadow: var(--shadow-elevation-medium);
       transform: translate3d(0px, -2px, 0px);
+
+      &:after {
+        opacity: 1;
+      }
     }
   }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -90,7 +90,7 @@
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  :global(.hero button:hover svg[data-icon-name='arrow-right']) {
+  :global(.hero .button-primary:hover svg[data-icon-name='arrow-right']) {
     transform: translateX(3px);
   }
 
@@ -140,7 +140,7 @@
     & > div {
       --color-alpha: 0.5;
       border: 1px solid var(--color-9);
-      background: var(--color-13);
+      background: linear-gradient(0deg, var(--color-12) 0%, var(--color-13) 8%, var(--color-13) 92%, var(--color-14) 100%);
       padding: var(--space-s);
       border-radius: var(--space-xs);
       box-shadow: var(--shadow-elevation-medium);

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -48,7 +48,7 @@ h4, h5, h6, p, li {
 .box {
   --color-alpha: 0.25;
   gap: var(--space-xs-s);
-  background: var(--color-4);
+  background: linear-gradient(0deg, var(--color-2) 0%, var(--color-4) 10%, var(--color-4) 90%, var(--color-7) 100%);
   border: 1px solid var(--color-2);
   padding: var(--space-3xs) var(--space-xs);
   border-radius: var(--space-2xs);