Package button

import "gitlab.com/zoralab/bissetii/pkg/components/internal/button"

Package button is for render the input button in multiple formats.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

Constants for managing the package as a whole.

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "button"

	// AMPName is the AMP HTML block name.
	AMPName = internal.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .ID                = Form id attribute (optional)            */ -}}
{{- /* .Class             = Form class attribute (optional)         */ -}}
`
)

Dependencies are the dependent codes for building independent template.

This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.

const (
	// DepHTML is the vanilla HTML output type.
	DepHTML = ``

	// DepAMPHTML is the Accelerated Mobile Pages HTML output
	// type.
	DepAMPHTML = ``
)

Full HTML codes for rendering templates without needing to parse file.

const (
	// HTML is the vanilla HTML output type.
	HTML = ``

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = ``
)

All Bissetii Compressed Compiled CSS

const (
	CSSAMP = `input[type=button],input[type=reset],input[type=submit],button,.button{display:var(--button-display);opacity:var(--button-opacity);margin:var(--button-margin);padding:var(--button-padding);border-width:var(--button-border-width);border-style:var(--button-border-style);border-radius:var(--button-border-radius);color:var(--button-color);background:var(--button-background);border-color:var(--button-border-color);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);text-align:var(--button-text-align);text-decoration:var(--button-text-decoration);text-transform:var(--button-text-transform);overflow-wrap:var(--button-overflow-wrap);word-break:var(--button-word-break);-webkit-transition:var(--button-transition);-ms-transition:var(--button-transition);-moz-transition:var(--button-transition);-o-transition:var(--button-transition);transition:var(--button-transition);position:relative}input[type=button]::before,input[type=button]::after,input[type=reset]::before,input[type=reset]::after,input[type=submit]::before,input[type=submit]::after,button::before,button::after,.button::before,.button::after{content:"";position:absolute;top:calc(var(--button-border-width) * -1);left:calc(var(--button-border-width) * -1);width:100%;height:100%;background:transparent}input[type=button]::after,input[type=reset]::after,input[type=submit]::after,button::after,.button::after{opacity:0;transform:scaleX(1.25) scaleY(1.5);transition:transform .5s,opacity .5s;border-width:var(--button-border-width);border-style:var(--button-border-style);border-radius:var(--button-border-radius);border-color:var(--button-border-color-focus)}input[type=button].clean,input[type=button].outline,input[type=reset].clean,input[type=reset].outline,input[type=submit].clean,input[type=submit].outline,button.clean,button.outline,.button.clean,.button.outline{--button-color:var(--button-color-invert);--button-background:transparent;--button-border-color:var(--button-color-invert)}input[type=button].clean,input[type=reset].clean,input[type=submit].clean,button.clean,.button.clean{--button-border-color:transparent}input[type=button]:focus:not(:disabled),input[type=button].outline:focus:not(:disabled),input[type=button].clean:focus:not(:disabled),input[type=button]:hover:not(:disabled),input[type=button].outline:hover:not(:disabled),input[type=button].clean:hover:not(:disabled),input[type=reset]:focus:not(:disabled),input[type=reset].outline:focus:not(:disabled),input[type=reset].clean:focus:not(:disabled),input[type=reset]:hover:not(:disabled),input[type=reset].outline:hover:not(:disabled),input[type=reset].clean:hover:not(:disabled),input[type=submit]:focus:not(:disabled),input[type=submit].outline:focus:not(:disabled),input[type=submit].clean:focus:not(:disabled),input[type=submit]:hover:not(:disabled),input[type=submit].outline:hover:not(:disabled),input[type=submit].clean:hover:not(:disabled),button:focus:not(:disabled),button.outline:focus:not(:disabled),button.clean:focus:not(:disabled),button:hover:not(:disabled),button.outline:hover:not(:disabled),button.clean:hover:not(:disabled),.button:focus:not(:disabled),.button.outline:focus:not(:disabled),.button.clean:focus:not(:disabled),.button:hover:not(:disabled),.button.outline:hover:not(:disabled),.button.clean:hover:not(:disabled){color:var(--button-color-focus);background:var(--button-background-focus);border-color:var(--button-border-color-focus)}input[type=button]:focus:not(:disabled)::after,input[type=button].outline:focus:not(:disabled)::after,input[type=button].clean:focus:not(:disabled)::after,input[type=button]:hover:not(:disabled)::after,input[type=button].outline:hover:not(:disabled)::after,input[type=button].clean:hover:not(:disabled)::after,input[type=reset]:focus:not(:disabled)::after,input[type=reset].outline:focus:not(:disabled)::after,input[type=reset].clean:focus:not(:disabled)::after,input[type=reset]:hover:not(:disabled)::after,input[type=reset].outline:hover:not(:disabled)::after,input[type=reset].clean:hover:not(:disabled)::after,input[type=submit]:focus:not(:disabled)::after,input[type=submit].outline:focus:not(:disabled)::after,input[type=submit].clean:focus:not(:disabled)::after,input[type=submit]:hover:not(:disabled)::after,input[type=submit].outline:hover:not(:disabled)::after,input[type=submit].clean:hover:not(:disabled)::after,button:focus:not(:disabled)::after,button.outline:focus:not(:disabled)::after,button.clean:focus:not(:disabled)::after,button:hover:not(:disabled)::after,button.outline:hover:not(:disabled)::after,button.clean:hover:not(:disabled)::after,.button:focus:not(:disabled)::after,.button.outline:focus:not(:disabled)::after,.button.clean:focus:not(:disabled)::after,.button:hover:not(:disabled)::after,.button.outline:hover:not(:disabled)::after,.button.clean:hover:not(:disabled)::after{opacity:1;transform:scaleX(1) scaleY(1)}input[type=button][disabled],input[type=button].disabled,input[type=reset][disabled],input[type=reset].disabled,input[type=submit][disabled],input[type=submit].disabled,button[disabled],button.disabled,.button[disabled],.button.disabled{pointer-events:none;opacity:var(--button-opacity-disabled)}`

	CSSCritical = `input[type=button],input[type=reset],input[type=submit],button,.button{display:var(--button-display);opacity:var(--button-opacity);margin:var(--button-margin);padding:var(--button-padding);border-width:var(--button-border-width);border-style:var(--button-border-style);border-radius:var(--button-border-radius);color:var(--button-color);background:var(--button-background);border-color:var(--button-border-color);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);text-align:var(--button-text-align);text-decoration:var(--button-text-decoration);text-transform:var(--button-text-transform);overflow-wrap:var(--button-overflow-wrap);word-break:var(--button-word-break);-webkit-transition:var(--button-transition);-ms-transition:var(--button-transition);-moz-transition:var(--button-transition);-o-transition:var(--button-transition);transition:var(--button-transition);position:relative}input[type=button]::before,input[type=button]::after,input[type=reset]::before,input[type=reset]::after,input[type=submit]::before,input[type=submit]::after,button::before,button::after,.button::before,.button::after{content:"";position:absolute;top:calc(var(--button-border-width) * -1);left:calc(var(--button-border-width) * -1);width:100%;height:100%;background:transparent}input[type=button]::after,input[type=reset]::after,input[type=submit]::after,button::after,.button::after{opacity:0;transform:scaleX(1.25) scaleY(1.5);transition:transform .5s,opacity .5s;border-width:var(--button-border-width);border-style:var(--button-border-style);border-radius:var(--button-border-radius);border-color:var(--button-border-color-focus)}input[type=button].clean,input[type=button].outline,input[type=reset].clean,input[type=reset].outline,input[type=submit].clean,input[type=submit].outline,button.clean,button.outline,.button.clean,.button.outline{--button-color:var(--button-color-invert);--button-background:transparent;--button-border-color:var(--button-color-invert)}input[type=button].clean,input[type=reset].clean,input[type=submit].clean,button.clean,.button.clean{--button-border-color:transparent}input[type=button]:focus:not(:disabled),input[type=button].outline:focus:not(:disabled),input[type=button].clean:focus:not(:disabled),input[type=button]:hover:not(:disabled),input[type=button].outline:hover:not(:disabled),input[type=button].clean:hover:not(:disabled),input[type=reset]:focus:not(:disabled),input[type=reset].outline:focus:not(:disabled),input[type=reset].clean:focus:not(:disabled),input[type=reset]:hover:not(:disabled),input[type=reset].outline:hover:not(:disabled),input[type=reset].clean:hover:not(:disabled),input[type=submit]:focus:not(:disabled),input[type=submit].outline:focus:not(:disabled),input[type=submit].clean:focus:not(:disabled),input[type=submit]:hover:not(:disabled),input[type=submit].outline:hover:not(:disabled),input[type=submit].clean:hover:not(:disabled),button:focus:not(:disabled),button.outline:focus:not(:disabled),button.clean:focus:not(:disabled),button:hover:not(:disabled),button.outline:hover:not(:disabled),button.clean:hover:not(:disabled),.button:focus:not(:disabled),.button.outline:focus:not(:disabled),.button.clean:focus:not(:disabled),.button:hover:not(:disabled),.button.outline:hover:not(:disabled),.button.clean:hover:not(:disabled){color:var(--button-color-focus);background:var(--button-background-focus);border-color:var(--button-border-color-focus)}input[type=button]:focus:not(:disabled)::after,input[type=button].outline:focus:not(:disabled)::after,input[type=button].clean:focus:not(:disabled)::after,input[type=button]:hover:not(:disabled)::after,input[type=button].outline:hover:not(:disabled)::after,input[type=button].clean:hover:not(:disabled)::after,input[type=reset]:focus:not(:disabled)::after,input[type=reset].outline:focus:not(:disabled)::after,input[type=reset].clean:focus:not(:disabled)::after,input[type=reset]:hover:not(:disabled)::after,input[type=reset].outline:hover:not(:disabled)::after,input[type=reset].clean:hover:not(:disabled)::after,input[type=submit]:focus:not(:disabled)::after,input[type=submit].outline:focus:not(:disabled)::after,input[type=submit].clean:focus:not(:disabled)::after,input[type=submit]:hover:not(:disabled)::after,input[type=submit].outline:hover:not(:disabled)::after,input[type=submit].clean:hover:not(:disabled)::after,button:focus:not(:disabled)::after,button.outline:focus:not(:disabled)::after,button.clean:focus:not(:disabled)::after,button:hover:not(:disabled)::after,button.outline:hover:not(:disabled)::after,button.clean:hover:not(:disabled)::after,.button:focus:not(:disabled)::after,.button.outline:focus:not(:disabled)::after,.button.clean:focus:not(:disabled)::after,.button:hover:not(:disabled)::after,.button.outline:hover:not(:disabled)::after,.button.clean:hover:not(:disabled)::after{opacity:1;transform:scaleX(1) scaleY(1)}input[type=button][disabled],input[type=button].disabled,input[type=reset][disabled],input[type=reset].disabled,input[type=submit][disabled],input[type=submit].disabled,button[disabled],button.disabled,.button[disabled],.button.disabled{pointer-events:none;opacity:var(--button-opacity-disabled)}`

	CSSTablet = ``

	CSSDesktop = ``

	CSSWidescreen = ``

	CSSPrint = ``

	CSSVariables    = ``

	CSSVariablesAMP = ``
)

Data

type Data struct {
	ID    string
	Class string
}

Data is the data structure for rendering the component.