-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgropdown-css_templ.go
40 lines (35 loc) · 16.3 KB
/
gropdown-css_templ.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.857
package gropdown
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
func GropdownCSS() 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_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<style type=\"text/css\">\n * {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n }\n\n :root {\n --gdd-color-space: oklab;\n\n /* - Color Shades - */\n --gdd-primary: hsl(215deg 16.3% 46.9%);\n\n --gdd-primary-10: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 10%,\n white\n );\n\n --gdd-primary-20: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 30%,\n white\n );\n\n --gdd-primary-30: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 50%,\n white\n );\n\n --gdd-primary-40: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 70%,\n white\n );\n\n --gdd-primary-50: var(--gdd-primary);\n\n --gdd-primary-60: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 70%,\n black\n );\n\n --gdd-primary-70: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 50%,\n black\n );\n\n --gdd-primary-80: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 30%,\n black\n );\n\n --gdd-primary-90: color-mix(\n in var(--gdd-color-space),\n var(--gdd-primary) 10%,\n black\n );\n\n --gdd-primary-lightest: var(--gdd-primary-10);\n --gdd-primary-lighter: var(--gdd-primary-20);\n --gdd-primary-light: var(--gdd-primary-30);\n --gdd-primary-dark: var(--gdd-primary-70);\n --gdd-primary-darker: var(--gdd-primary-80);\n --gdd-primary-darkest: var(--gdd-primary-90);\n\n /* Dropdown Button */\n --gdd-button-min-w: 4.5em;\n --gdd-button-py: 1ch;\n --gdd-button-px: 2ch;\n --gdd-button-icon-space: 0.5ch;\n\n --gdd-button-font-size: 1rem;\n --gdd-button-font-family: inherit;\n --gdd-button-font-weight: 500;\n --gdd-button-line-height: 1.25;\n --gdd-button-letter-spacing: 0.025em;\n\n --gdd-button-border-width: 1px;\n --gdd-button-border-style: solid;\n --gdd-button-border-radius: 0.25rem;\n\n --gdd-button-transition-property: background;\n --gdd-button-transition-duration: 300ms;\n --gdd-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n --gdd-button-ring-width: 2px;\n --gdd-button-ring-style: solid;\n --gdd-button-ring-offset: 1px;\n\n --gdd-button-animation-open-name: flipOutX;\n --gdd-button-animation-close-name: flipInX;\n\n /* Dropdown Content */\n --gdd-content-w: 13rem;\n --gdd-content-max-w: 16rem;\n --gdd-content-mx: 0;\n --gdd-content-my: 0.25em;\n --gdd-content-px: 0.375em;\n --gdd-content-py: 0.5em;\n\n --gdd-content-border-width: 1px;\n --gdd-content-border-style: solid;\n --gdd-content-border-radius: 0.25rem;\n\n --gdd-content-animation-name: fadeIn;\n --gdd-content-animation-duration: 0.3s;\n --gdd-content-animation-timing-function: ease-in-out;\n --gdd-content-animation-direction: forwards;\n\n /* Dropdown Item */\n --gdd-item-px: 0.375em;\n --gdd-item-py: 0.375em;\n --gdd-item-icon-space: 1ch;\n\n --gdd-item-font-family: inherit;\n --gdd-item-font-size: 1rem;\n --gdd-item-font-weight: 500;\n --gdd-item-line-height: 1.25;\n --gdd-item-letter-spacing: 0.025em;\n\n --gdd-item-border-width: 1px;\n --gdd-item-border-style: solid;\n --gdd-item-border-color: transparent;\n --gdd-item-border-radius: 0.25rem;\n\n --gdd-item-ring-width: 1px;\n --gdd-item-ring-style: solid;\n --gdd-item-ring-offset: 0;\n --gdd-item-ring-color: transparent;\n\n /* Divider */\n --gdd-item-divider-width: 1px;\n --gdd-item-divider-style: solid;\n }\n\n @media (prefers-color-scheme: light) {\n :root {\n /* button */\n --gdd-button-color: var(--gdd-primary-darker);\n --gdd-button-color-hover: var(--gdd-primary-darker);\n --gdd-button-color-focus: var(--gdd-primary-darker);\n --gdd-button-bg: var(--gdd-primary-lightest);\n --gdd-button-bg-hover: var(--gdd-primary-lighter);\n --gdd-button-bg-focus: var(--gdd-primary-lighter);\n --gdd-button-border-color: transparent;\n --gdd-button-ring-color: var(--gdd-primary-light);\n /* content */\n --gdd-content-bg: #FFFFFF;\n --gdd-content-border-color: var(--gdd-primary-lighter);\n /* item */\n --gdd-item-color: var(--gdd-primary-dark);\n --gdd-item-color-hover: var(--gdd-primary-darker);\n --gdd-item-color-focus: var(--gdd-primary-darker);\n --gdd-item-bg: transparent;\n --gdd-item-bg-hover: var(--gdd-primary-lightest);\n --gdd-item-bg-focus: var(--gdd-primary-lightest);\n /* divider */\n --gdd-divider-color: var(--gdd-primary-lighter);\n }\n }\n\n @media (prefers-color-scheme: dark){\n :root {\n /* button */\n --gdd-button-color: var(--gdd-primary-lighter);\n --gdd-button-color-hover: var(--gdd-primary-lighter);\n --gdd-button-color-focus: var(--gdd-primary-lighter);\n --gdd-button-bg: var(--gdd-primary-dark);\n --gdd-button-bg-hover: var(--gdd-primary-darker);\n --gdd-button-bg-focus: var(--gdd-primary-darker);\n --gdd-button-border-color: transparent;\n --gdd-button-ring-color: var(--gdd-primary);\n /* content */\n --gdd-content-bg: var(--gdd-primary-darker);\n --gdd-content-border-color: var(--gdd-primary-darkest);\n /* item */\n --gdd-item-color: var(--gdd-primary-light);\n --gdd-item-color-hover: var(--gdd-primary-lightest);\n --gdd-item-color-focus: var(--gdd-primary-lightest);\n --gdd-item-bg: transparent;\n --gdd-item-bg-hover: var(--gdd-primary-60);\n --gdd-item-bg-focus: var(--gdd-primary-60);\n /* divider */\n --gdd-divider-color: var(--gdd-primary);\n }\n }\n\n :root[data-theme=\"light\"] {\n /* button */\n --gdd-button-color: var(--gdd-primary-darker);\n --gdd-button-color-hover: var(--gdd-primary-darker);\n --gdd-button-color-focus: var(--gdd-primary-darker);\n --gdd-button-bg: var(--gdd-primary-lightest);\n --gdd-button-bg-hover: var(--gdd-primary-lighter);\n --gdd-button-bg-focus: var(--gdd-primary-lighter);\n --gdd-button-border-color: transparent;\n --gdd-button-ring-color: var(--gdd-primary-light);\n /* content */\n --gdd-content-bg: #FFFFFF;\n --gdd-content-border-color: var(--gdd-primary-lighter);\n /* item */\n --gdd-item-color: var(--gdd-primary-dark);\n --gdd-item-color-hover: var(--gdd-primary-darker);\n --gdd-item-color-focus: var(--gdd-primary-darker);\n --gdd-item-bg: transparent;\n --gdd-item-bg-hover: var(--gdd-primary-lightest);\n --gdd-item-bg-focus: var(--gdd-primary-lightest);\n /* divider */\n --gdd-divider-color: var(--gdd-primary-lighter);\n }\n\n :root[data-theme=\"dark\"] {\n /* button */\n --gdd-button-color: var(--gdd-primary-lighter);\n --gdd-button-color-hover: var(--gdd-primary-lighter);\n --gdd-button-color-focus: var(--gdd-primary-lighter);\n --gdd-button-bg: var(--gdd-primary-dark);\n --gdd-button-bg-hover: var(--gdd-primary-darker);\n --gdd-button-bg-focus: var(--gdd-primary-darker);\n --gdd-button-border-color: transparent;\n --gdd-button-ring-color: var(--gdd-primary);\n /* content */\n --gdd-content-bg: var(--gdd-primary-darker);\n --gdd-content-border-color: var(--gdd-primary-darkest);\n /* item */\n --gdd-item-color: var(--gdd-primary-light);\n --gdd-item-color-hover: var(--gdd-primary-lightest);\n --gdd-item-color-focus: var(--gdd-primary-lightest);\n --gdd-item-bg: transparent;\n --gdd-item-bg-hover: var(--gdd-primary-60);\n --gdd-item-bg-focus: var(--gdd-primary-60);\n /* divider */\n --gdd-divider-color: var(--gdd-primary);\n }\n\n /* ********************************************* *\n * Dropdown Container\n * ********************************************* */\n .gdd_gropdown_container {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smooth: auto;\n position: relative;\n display: inline-block;\n }\n\n /* ********************************************* *\n * Dropdown Button\n * ********************************************* */\n .gdd_button {\n cursor: pointer;\n min-width: var(--gdd-button-min-w);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--gdd-button-icon-space);\n margin: 0;\n padding: var(--gdd-button-py) var(--gdd-button-px);\n color: var(--gdd-button-color);\n border-width: var(--gdd-button-border-width);\n border-style: var(--gdd-button-border-style);\n border-color: var(--gdd-button-border-color);\n border-radius: var(--gdd-button-border-radius);\n background-color: var(--gdd-button-bg);\n font-family: var(--gdd-button-font-family);\n font-size: var(--gdd-button-font-size);\n font-weight: var(--gdd-button-font-weight);\n line-height: var(--gdd-button-line-height);\n letter-spacing: var(--gdd-button-letter-spacing);\n text-transform: none;\n text-decoration-line: var(--_text-decoration-line);\n transition: var(--gdd-button-transition-property) var(--gdd-button-transition-duration) var(--gdd-button-transition-timing-function);\n }\n\n .gdd_button:hover {\n --gdd-button-color: var(--gdd-button-color-hover);\n --gdd-button-bg: var(--gdd-button-bg-hover);\n }\n\n .gdd_button:focus,\n .gdd_button:focus-visible {\n --gdd-button-color: var(--gdd-button-color-focus);\n --gdd-button-bg: var(--gdd-button-bg-focus);\n outline: var(--gdd-button-ring-color) var(--gdd-button-ring-style) var(--gdd-button-ring-width);\n outline-offset: var(--gdd-button-ring-offset);\n }\n\n .gdd_button_icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n }\n\n .gdd_button_icon_only {\n min-width: 2.5rem;\n padding: 0;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 1e5px;\n aspect-ratio: 1;\n }\n\n /* Apply animations based on classes */\n .iconToOpen {\n animation: var(--gdd-button-animation-open-name) 0.3s ease forwards;\n }\n\n .iconToClose {\n animation: var(--gdd-button-animation-close-name) 0.3s ease forwards;\n }\n\n /* ********************************************* *\n * Dropdown Content\n * ********************************************* */\n .gdd_content {\n position: absolute;\n z-index: 10;\n overflow: hidden;\n list-style: none;\n width: var(--gdd-content-w);\n max-width: var(--gdd-content-max-w);\n margin: var(--gdd-content-my) var(--gdd-content-mx);\n padding: var(--gdd-content-py) var(--gdd-content-px);\n background-color: var(--gdd-content-bg);\n border-width: var(--gdd-content-border-width);\n border-style: var(--gdd-content-border-style);\n border-color: var(--gdd-content-border-color);\n border-radius: var(--gdd-content-border-radius);\n transition: opacity var(--gdd-content-animation-duration) var(--gdd-content-animation-timing-function);\n animation-duration: var(--gdd-content-animation-duration);\n animation-direction: var(--gdd-content-animation-direction);\n animation-timing-function: var(--gdd-content-animation-timing-function);\n }\n\n [data-position=\"top\"] .gdd_content {\n top: auto;\n bottom: 100%;\n }\n\n [data-position=\"bottom\"] .gdd_content {\n top: 100%;\n bottom: auto;\n }\n\n [data-position=\"left\"] .gdd_content {\n --gdd-content-my: 0;\n --gdd-content-mx: 0.25rem;\n inset-inline-end: 100%;\n top: 0;\n bottom: auto;\n }\n\n [data-position=\"right\"] .gdd_content {\n --gdd-content-my: 0;\n --gdd-content-mx: 0.25rem;\n inset-inline-start: 100%;\n top: 0;\n bottom: auto;\n }\n\n .gdd_content[data-state=\"open\"] {\n visibility: visible;\n opacity: 1;\n animation-name: var(--gdd-content-animation-name);\n }\n\n .gdd_content[data-state=\"close\"] {\n visibility: hidden;\n opacity: 0;\n }\n\n /* ********************************************* *\n * Dropdown Content Item\n * ********************************************* */\n .gdd_content_item {\n position: relative;\n display: flex;\n width: 100%;\n text-decoration: none;\n gap: var(--gdd-item-icon-space);\n padding: var(--gdd-item-py) var(--gdd-item-px);\n color: var(--gdd-item-color);\n font-family: var(--gdd-item-font-family);\n font-size: var(--gdd-item-font-size);\n line-height: var(--gdd-item-line-height);\n letter-spacing: var(--gdd-item-letter-spacing);\n background-color: var(--gdd-item-bg);\n border-width: var(--gdd-item-border-width);\n border-style: var(--gdd-item-border-style);\n border-color: var(--gdd-item-border-color);\n border-radius: var(--gdd-item-border-radius);\n }\n\n .gdd_content_item[href^=\"http\"] {\n padding-right: 1.25em;\n }\n\n .gdd_content_item:hover {\n --gdd-item-color: var(--gdd-item-color-hover);\n --gdd-item-bg: var(--gdd-item-bg-hover);\n }\n\n .gdd_content_item:focus,\n .gdd_content_item:focus-visible {\n --gdd-item-color: var(--gdd-item-color-focus);\n --gdd-item-bg: var(--gdd-item-bg-focus);\n outline: var(--gdd-item-ring-color) var(--gdd-item-ring-style) var(--gdd-item-ring-width);\n outline-offset: var(--gdd-item-ring-offset);\n opacity: 1;\n }\n\n .gdd_content_item_icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1.25em;\n height: 1.25em;\n }\n\n .gdd_content_divider {\n height: 0;\n margin: 0.125rem 0;\n overflow: hidden;\n border-top: var(--gdd-item-divider-width) var(--gdd-item-divider-style) var(--gdd-divider-color);\n }\n\n .gdd_sr_only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n /* ********************************************* *\n * Animations\n * ********************************************* */\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes flipInX {\n from {\n transform: scaleY(-1);\n }\n\n to {\n transform: scaleY(1);\n }\n }\n\n @keyframes flipOutX {\n from {\n transform: scaleY(1);\n }\n\n to {\n transform: scaleY(-1);\n }\n }\n</style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
var _ = templruntime.GeneratedTemplate