(UI/STYLE): Update the search section to be contained by the pills.
This looks a bit better and will be a bit easier to use.
This commit is contained in:
Hayden Hargreaves
parent
d4a0b09b11
commit
8c98eab62b
@ -60,37 +60,37 @@ templ listIcon(current, name, url string) {
|
||||
}
|
||||
|
||||
templ Navbar(current string) {
|
||||
<nav class="block md:fixed w-full z-10">
|
||||
<div
|
||||
class="relative w-full px-8 md:px-44 p-4 border-b border-gray-300 shadow-sm shadow-gray-300 bg-white flex justify-between items-center">
|
||||
<div>
|
||||
<p class="select-none">Potion</p>
|
||||
</div>
|
||||
<div class="hidden md:flex lg:flex items-center gap-8 select-none">
|
||||
@navLink(current, "Home", "/v1/web/home")
|
||||
@navLink(current, "Favorites", "/v1/web/favorites")
|
||||
@navLink(current, "Create", "/v1/web/create")
|
||||
@navLink(current, "Profile", "/v1/web/profile")
|
||||
@listIcon(current, "List", "/v1/web/list")
|
||||
</div>
|
||||
<div class="md:hidden grid place-content-center">
|
||||
<button onclick="toggleMenu()" class="p-2">
|
||||
// carot
|
||||
<svg id="mobile-menu-button-carot" class="hidden size-5" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512">
|
||||
<path
|
||||
d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z">
|
||||
</path>
|
||||
</svg>
|
||||
// bars
|
||||
<svg id="mobile-menu-button-bars" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@hamburgerMenu()
|
||||
<nav class="block md:fixed w-full z-10">
|
||||
<div
|
||||
class="relative w-full px-8 md:px-44 p-4 border-b border-gray-300 shadow-sm shadow-gray-300 bg-white flex justify-between items-center">
|
||||
<div>
|
||||
<p class="select-none">Potion</p>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hidden md:flex lg:flex items-center gap-8 select-none">
|
||||
@navLink(current, "Home", "/v1/web/home")
|
||||
@navLink(current, "Favorites", "/v1/web/favorites")
|
||||
@navLink(current, "Create", "/v1/web/create")
|
||||
@navLink(current, "Profile", "/v1/web/profile")
|
||||
@listIcon(current, "List", "/v1/web/list")
|
||||
</div>
|
||||
<div class="md:hidden grid place-content-center">
|
||||
<button onclick="toggleMenu()" class="p-2">
|
||||
// carot
|
||||
<svg id="mobile-menu-button-carot" class="hidden size-5" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512">
|
||||
<path
|
||||
d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z">
|
||||
</path>
|
||||
</svg>
|
||||
// bars
|
||||
<svg id="mobile-menu-button-bars" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@hamburgerMenu()
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@ -32,29 +32,59 @@ templ pillButton(name string) {
|
||||
</button>
|
||||
}
|
||||
|
||||
templ cravingSomethingSection() {
|
||||
templ searchBar() {
|
||||
<div class="relative w-full max-w-xl">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search recipes, ingredients..."
|
||||
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<svg
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ searchSection() {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
|
||||
Craving Something Specific?
|
||||
</h2>
|
||||
<div class="flex flex-wrap justify-center gap-3 md:gap-2 my-8 px-2 md:px-0 w-full md:w-2/3">
|
||||
@pillButton("Breakfast")
|
||||
@pillButton("Lunch")
|
||||
@pillButton("Dinner")
|
||||
@pillButton("Desert")
|
||||
@pillButton("Snack")
|
||||
@pillButton("Side")
|
||||
@pillButton("Other")
|
||||
<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
|
||||
@searchBar()
|
||||
<div class="flex flex-wrap justify-center gap-3 my-4">
|
||||
@pillButton("Breakfast")
|
||||
@pillButton("Lunch")
|
||||
@pillButton("Dinner")
|
||||
@pillButton("Desert")
|
||||
@pillButton("Snack")
|
||||
@pillButton("Side")
|
||||
@pillButton("Other")
|
||||
</div>
|
||||
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 duration-200">
|
||||
Search Recipes
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ HomePage() {
|
||||
@components.Navbar("home")
|
||||
<div class="w-full h-[200vh] flex justify-center">
|
||||
<div class="w-full h-fit flex justify-center">
|
||||
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
|
||||
@introSection()
|
||||
@cravingSomethingSection()
|
||||
@searchSection()
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -81,7 +81,7 @@ func pillButton(name string) templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func cravingSomethingSection() templ.Component {
|
||||
func searchBar() templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
@ -102,7 +102,44 @@ func cravingSomethingSection() templ.Component {
|
||||
templ_7745c5c3_Var4 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\"><h2 class=\"text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white\">Craving Something Specific?</h2><div class=\"flex flex-wrap justify-center gap-3 md:gap-2 my-8 px-2 md:px-0 w-full md:w-2/3\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"relative w-full max-w-xl\"><input type=\"text\" placeholder=\"Search recipes, ingredients...\" class=\"w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"> <svg class=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path></svg></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
func searchSection() templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var5 == nil {
|
||||
templ_7745c5c3_Var5 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\"><h2 class=\"text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white\">Craving Something Specific?</h2><div class=\"w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = searchBar().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"flex flex-wrap justify-center gap-3 my-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -134,7 +171,7 @@ func cravingSomethingSection() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></section>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div><button class=\"bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 duration-200\">Search Recipes</button></div></section>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -158,16 +195,16 @@ func HomePage() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var5 == nil {
|
||||
templ_7745c5c3_Var5 = templ.NopComponent
|
||||
templ_7745c5c3_Var6 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var6 == nil {
|
||||
templ_7745c5c3_Var6 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = components.Navbar("home").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"w-full h-[200vh] flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"w-full h-fit flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -175,11 +212,11 @@ func HomePage() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cravingSomethingSection().Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = searchSection().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@ -7,22 +7,30 @@
|
||||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-red-300: oklch(80.8% 0.114 19.571);
|
||||
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||
--color-blue-100: oklch(93.2% 0.032 255.585);
|
||||
--color-blue-200: oklch(88.2% 0.059 254.128);
|
||||
--color-blue-300: oklch(80.9% 0.105 251.813);
|
||||
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||
--color-blue-500: oklch(62.3% 0.214 259.815);
|
||||
--color-blue-600: oklch(54.6% 0.245 262.881);
|
||||
--color-purple-200: oklch(90.2% 0.063 306.703);
|
||||
--color-purple-400: oklch(71.4% 0.203 305.504);
|
||||
--color-purple-500: oklch(62.7% 0.265 303.9);
|
||||
--color-purple-600: oklch(55.8% 0.288 302.321);
|
||||
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||
--color-gray-100: oklch(96.7% 0.003 264.542);
|
||||
--color-gray-200: oklch(92.8% 0.006 264.531);
|
||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||
--color-gray-600: oklch(44.6% 0.03 256.802);
|
||||
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-lg: 1.125rem;
|
||||
@ -207,6 +215,18 @@
|
||||
.top-\[100\%\] {
|
||||
top: 100%;
|
||||
}
|
||||
.top-\[calc\(50\%\+40px\)\] {
|
||||
top: calc(50% + 40px);
|
||||
}
|
||||
.right-2 {
|
||||
right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.right-3 {
|
||||
right: calc(var(--spacing) * 3);
|
||||
}
|
||||
.right-4 {
|
||||
right: calc(var(--spacing) * 4);
|
||||
}
|
||||
.left-0 {
|
||||
left: calc(var(--spacing) * 0);
|
||||
}
|
||||
@ -216,14 +236,20 @@
|
||||
.left-1\/2 {
|
||||
left: calc(1/2 * 100%);
|
||||
}
|
||||
.left-3 {
|
||||
left: calc(var(--spacing) * 3);
|
||||
}
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-20 {
|
||||
z-index: 20;
|
||||
}
|
||||
.mx-2 {
|
||||
margin-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mx-4 {
|
||||
margin-inline: calc(var(--spacing) * 4);
|
||||
.my-4 {
|
||||
margin-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.my-8 {
|
||||
margin-block: calc(var(--spacing) * 8);
|
||||
@ -231,15 +257,36 @@
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: calc(var(--spacing) * 5);
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: calc(var(--spacing) * 8);
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.mb-16 {
|
||||
margin-bottom: calc(var(--spacing) * 16);
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -265,6 +312,12 @@
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.h-6 {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.h-\[200vh\] {
|
||||
height: 200vh;
|
||||
}
|
||||
@ -280,8 +333,14 @@
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
.w-1\/2 {
|
||||
width: calc(1/2 * 100%);
|
||||
.min-h-\[100px\] {
|
||||
min-height: 100px;
|
||||
}
|
||||
.min-h-\[300px\] {
|
||||
min-height: 300px;
|
||||
}
|
||||
.w-2 {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.w-2\/3 {
|
||||
width: calc(2/3 * 100%);
|
||||
@ -298,18 +357,24 @@
|
||||
.w-4\/5 {
|
||||
width: calc(4/5 * 100%);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
.w-32 {
|
||||
width: calc(var(--spacing) * 32);
|
||||
}
|
||||
.w-48 {
|
||||
width: calc(var(--spacing) * 48);
|
||||
}
|
||||
.w-fit {
|
||||
width: fit-content;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
.max-w-xl {
|
||||
max-width: var(--container-xl);
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@ -335,21 +400,6 @@
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.auto-cols-auto {
|
||||
grid-auto-columns: auto;
|
||||
}
|
||||
.auto-cols-max {
|
||||
grid-auto-columns: max-content;
|
||||
}
|
||||
.auto-cols-min {
|
||||
grid-auto-columns: min-content;
|
||||
}
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -371,9 +421,6 @@
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -383,6 +430,9 @@
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-6 {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
@ -402,6 +452,14 @@
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-2 {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-style: var(--tw-border-style);
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.border-r {
|
||||
border-right-style: var(--tw-border-style);
|
||||
border-right-width: 1px;
|
||||
@ -418,6 +476,9 @@
|
||||
border-left-style: var(--tw-border-style);
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.border-blue-300 {
|
||||
border-color: var(--color-blue-300);
|
||||
}
|
||||
.border-blue-500 {
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
@ -427,15 +488,30 @@
|
||||
.border-gray-300 {
|
||||
border-color: var(--color-gray-300);
|
||||
}
|
||||
.border-red-500 {
|
||||
border-color: var(--color-red-500);
|
||||
.border-purple-400 {
|
||||
border-color: var(--color-purple-400);
|
||||
}
|
||||
.border-white {
|
||||
border-color: var(--color-white);
|
||||
}
|
||||
.bg-blue-100 {
|
||||
background-color: var(--color-blue-100);
|
||||
}
|
||||
.bg-blue-500 {
|
||||
background-color: var(--color-blue-500);
|
||||
}
|
||||
.bg-gray-50 {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
.bg-gray-100 {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.bg-gray-200 {
|
||||
background-color: var(--color-gray-200);
|
||||
}
|
||||
.bg-gray-500 {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
@ -443,26 +519,10 @@
|
||||
--tw-gradient-position: to right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-gradient-to-t {
|
||||
--tw-gradient-position: to top in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-gradient-to-tr {
|
||||
--tw-gradient-position: to top right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.from-blue-300 {
|
||||
--tw-gradient-from: var(--color-blue-300);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.from-blue-400 {
|
||||
--tw-gradient-from: var(--color-blue-400);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-blue-400 {
|
||||
--tw-gradient-to: var(--color-blue-400);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-blue-600 {
|
||||
--tw-gradient-to: var(--color-blue-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
@ -479,12 +539,12 @@
|
||||
.px-2 {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
.px-3 {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-5 {
|
||||
padding-inline: calc(var(--spacing) * 5);
|
||||
}
|
||||
.px-6 {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
@ -509,6 +569,36 @@
|
||||
.py-6 {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-16 {
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pr-4 {
|
||||
padding-right: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pr-6 {
|
||||
padding-right: calc(var(--spacing) * 6);
|
||||
}
|
||||
.pr-10 {
|
||||
padding-right: calc(var(--spacing) * 10);
|
||||
}
|
||||
.pr-12 {
|
||||
padding-right: calc(var(--spacing) * 12);
|
||||
}
|
||||
.pl-2 {
|
||||
padding-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.pl-8 {
|
||||
padding-left: calc(var(--spacing) * 8);
|
||||
}
|
||||
.pl-10 {
|
||||
padding-left: calc(var(--spacing) * 10);
|
||||
}
|
||||
.pl-12 {
|
||||
padding-left: calc(var(--spacing) * 12);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@ -551,6 +641,12 @@
|
||||
.text-blue-500 {
|
||||
color: var(--color-blue-500);
|
||||
}
|
||||
.text-gray-400 {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
.text-gray-500 {
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
.text-gray-600 {
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
@ -560,19 +656,26 @@
|
||||
.text-gray-800 {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
.text-purple-500 {
|
||||
color: var(--color-purple-500);
|
||||
}
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.opacity-80 {
|
||||
opacity: 80%;
|
||||
}
|
||||
.shadow-2xs {
|
||||
--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-inner {
|
||||
--tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@ -581,6 +684,10 @@
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-gray-300 {
|
||||
--tw-shadow-color: oklch(87.2% 0.01 258.338);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@ -620,6 +727,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-blue-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-blue-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -627,6 +741,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-blue-400 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -642,16 +763,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-blue-200 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-shadow-color: oklch(88.2% 0.059 254.128);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-200) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-blue-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -662,11 +773,42 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus\:border-blue-500 {
|
||||
&:focus {
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
}
|
||||
.focus\:border-purple-600 {
|
||||
&:focus {
|
||||
border-color: var(--color-purple-600);
|
||||
}
|
||||
}
|
||||
.focus\:bg-gray-50 {
|
||||
&:focus {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
.focus\:ring-2 {
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.focus\:ring-blue-200 {
|
||||
&:focus {
|
||||
--tw-ring-color: var(--color-blue-200);
|
||||
}
|
||||
}
|
||||
.focus\:ring-blue-500 {
|
||||
&:focus {
|
||||
--tw-ring-color: var(--color-blue-500);
|
||||
}
|
||||
}
|
||||
.focus\:ring-purple-200 {
|
||||
&:focus {
|
||||
--tw-ring-color: var(--color-purple-200);
|
||||
}
|
||||
}
|
||||
.focus\:outline-hidden {
|
||||
&:focus {
|
||||
--tw-outline-style: none;
|
||||
@ -677,6 +819,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus\:outline-none {
|
||||
&:focus {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
}
|
||||
}
|
||||
.disabled\:pointer-events-none {
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
@ -697,17 +845,16 @@
|
||||
padding: calc(var(--spacing) * 7);
|
||||
}
|
||||
}
|
||||
.sm\:text-2xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:fixed {
|
||||
@media (width >= 48rem) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
.md\:top-\[calc\(50\%\+60px\)\] {
|
||||
@media (width >= 48rem) {
|
||||
top: calc(50% + 60px);
|
||||
}
|
||||
}
|
||||
.md\:mx-0 {
|
||||
@media (width >= 48rem) {
|
||||
margin-inline: calc(var(--spacing) * 0);
|
||||
@ -728,11 +875,31 @@
|
||||
width: calc(1/2 * 100%);
|
||||
}
|
||||
}
|
||||
.md\:w-1\/3 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(1/3 * 100%);
|
||||
}
|
||||
}
|
||||
.md\:w-2\/3 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(2/3 * 100%);
|
||||
}
|
||||
}
|
||||
.md\:flex-row {
|
||||
@media (width >= 48rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.md\:items-center {
|
||||
@media (width >= 48rem) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.md\:justify-start {
|
||||
@media (width >= 48rem) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.md\:gap-2 {
|
||||
@media (width >= 48rem) {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
@ -753,16 +920,6 @@
|
||||
padding-top: calc(var(--spacing) * 14);
|
||||
}
|
||||
}
|
||||
.md\:pt-16 {
|
||||
@media (width >= 48rem) {
|
||||
padding-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
}
|
||||
.md\:pt-18 {
|
||||
@media (width >= 48rem) {
|
||||
padding-top: calc(var(--spacing) * 18);
|
||||
}
|
||||
}
|
||||
.md\:text-2xl {
|
||||
@media (width >= 48rem) {
|
||||
font-size: var(--text-2xl);
|
||||
@ -774,6 +931,11 @@
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.lg\:w-1\/2 {
|
||||
@media (width >= 64rem) {
|
||||
width: calc(1/2 * 100%);
|
||||
}
|
||||
}
|
||||
.lg\:w-2\/7 {
|
||||
@media (width >= 64rem) {
|
||||
width: calc(2/7 * 100%);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user