LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

card border gradients

Browse Source
This commit is contained in:
tglide
2023-09-01 20:58:22 +01:00
parent cf9246499e
commit 6583ef1133
4 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+page.svelte
View File

@@ -376,7 +376,7 @@
</button>
</section>
<section
class="aw-card is-transparent aw-u-max-inline-width-584-mobile aw-u-margin-inline-auto-mobile aw-u-inline-width-100-percent-mobile"
class="aw-card is-transparent has-border-gradient aw-u-max-inline-width-584-mobile aw-u-margin-inline-auto-mobile aw-u-inline-width-100-percent-mobile"
>
<Tabs let:TabsList let:TabContent tabs={['Cloud', 'Self-Hosted']}>
<header class="aw-strip-plans-header">

14
src/routes/pricing/+page.svelte
View File

@@ -34,7 +34,7 @@
<ul class="aw-pricing-cards-list">
<li>
<article
class="aw-card is-transparent u-height-100-percent"
class="aw-card is-transparent has-border-gradient u-height-100-percent"
style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
>
<div class="aw-pricing-cards-item">
@@ -66,7 +66,9 @@
</article>
</li>
<li>
<article class="aw-card is-transparent is-transparent-pink u-height-100-percent">
<article
class="aw-card is-transparent is-transparent-pink has-border-gradient u-height-100-percent"
>
<div class="aw-pricing-cards-item">
<header class="aw-pricing-cards-header">
<h2 class="aw-label">Pro</h2>
@@ -101,7 +103,7 @@
</li>
<li>
<article
class="aw-card is-transparent u-height-100-percent"
class="aw-card is-transparent has-border-gradient u-height-100-percent"
style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
>
<div class="aw-pricing-cards-item">
@@ -135,7 +137,7 @@
<ul class="aw-grid-1-1-opt-2 u-gap-32 aw-u-margin-block-start-80">
<li>
<article
class="aw-card is-transparent u-min-height-100-percent"
class="aw-card is-transparent has-border-gradient u-min-height-100-percent"
style="background:rgba(35, 35, 37, 0.90);"
>
<header class="u-flex u-gap-12">
@@ -152,7 +154,7 @@
</li>
<li>
<article
class="aw-card is-transparent u-min-height-100-percent"
class="aw-card is-transparent has-border-gradient u-min-height-100-percent"
style="background:rgba(35, 35, 37, 0.90);"
>
<header class="u-flex u-gap-12">
@@ -613,7 +615,7 @@
</button>
</section>
<section
class="aw-card is-transparent aw-u-max-inline-width-584-mobile aw-u-margin-inline-auto-mobile aw-u-inline-width-100-percent-mobile"
class="aw-card is-transparent has-border-gradient aw-u-max-inline-width-584-mobile aw-u-margin-inline-auto-mobile aw-u-inline-width-100-percent-mobile"
>
<header class="aw-strip-plans-header">
<div class="aw-strip-plans-header-wrapper aw-u-row-gap-24">

1
src/scss/6-elements/_button.scss
View File

@@ -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;
}
}

20
src/scss/6-elements/_card.scss
View File

@@ -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%);
}
}
}
}