From 6583ef1133ef20dad3c2a30b769ec8f4ac98775f Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Fri, 1 Sep 2023 20:58:22 +0100 Subject: [PATCH] card border gradients --- src/routes/+page.svelte | 2 +- src/routes/pricing/+page.svelte | 14 ++++++++------ src/scss/6-elements/_button.scss | 1 - src/scss/6-elements/_card.scss | 20 ++++++++++++++++++++ 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6bef48af8c..ca45b6c1e6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -376,7 +376,7 @@
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index 3ed23a81e1..94b9cf0cb0 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -34,7 +34,7 @@
  • @@ -66,7 +66,9 @@
  • -
    +

    Pro

    @@ -101,7 +103,7 @@
  • @@ -135,7 +137,7 @@
    • @@ -152,7 +154,7 @@
    • @@ -613,7 +615,7 @@
diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss index 99c34f90d5..03f6a75362 100644 --- a/src/scss/6-elements/_button.scss +++ b/src/scss/6-elements/_button.scss @@ -102,7 +102,6 @@ &:where(:focus-visible) { background: rgba(253, 54, 110, 0.04); box-shadow: 0px 0px 0px 4px rgba(253, 54, 110, 0.16), 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset; - } } diff --git a/src/scss/6-elements/_card.scss b/src/scss/6-elements/_card.scss index 89de1704f5..ccde3ed555 100644 --- a/src/scss/6-elements/_card.scss +++ b/src/scss/6-elements/_card.scss @@ -31,4 +31,24 @@ --card-bg-color: var(--aw-color-neutral-850); } } + + &.has-border-gradient { + @include border-gradient; + --m-border-radius: var(--p-card-border-radius); + --m-border-size: #{pxToRem(1)}; + border: none; + + &::before { + --m-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%); + } + + &.is-transparent-pink { + &::before { + --m-border-gradient: linear-gradient(180deg, rgba(253, 54, 110, 0.48) 0%, rgba(253, 54, 110, 0.00) 100%); + } + &::after { + --m-border-gradient: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%); + } + } + } } \ No newline at end of file