protected override void GenerateButtonStyles(StringBuilder sb, Theme theme, ThemeButtonOptions options)
{
sb.Append(".btn").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
.AppendLine("}");
sb.Append(".btn-sm").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.SmallBorderRadius, Var( ThemeVariables.BorderRadiusSmall ) )};")
.AppendLine("}");
sb.Append(".btn-lg").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.LargeBorderRadius, Var( ThemeVariables.BorderRadiusLarge ) )};")
.AppendLine("}");
if (!string.IsNullOrEmpty(options?.Padding))
{
sb.Append(".btn").Append("{")
.Append($"padding: {options.Padding};")
.AppendLine("}");
}
if (!string.IsNullOrEmpty(options?.Margin))
{
sb.Append(".btn").Append("{")
.Append($"margin: {options.Margin};")
.AppendLine("}");
}
if (options?.DisabledOpacity != null)
{
sb.Append(".btn.disabled, .btn:disabled").Append("{")
.Append($"opacity: {options.DisabledOpacity};")
.AppendLine("}");
}
}
protected override void GenerateButtonStyles(StringBuilder sb, Theme theme, ThemeButtonOptions options)
{
sb.Append($".button").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
.AppendLine("}");
sb.Append($".button.is-small").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.SmallBorderRadius, Var( ThemeVariables.BorderRadiusSmall ) )};")
.AppendLine("}");
sb.Append($".button.is-large").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.LargeBorderRadius, Var( ThemeVariables.BorderRadiusLarge ) )};")
.AppendLine("}");
if (!string.IsNullOrEmpty(options?.Padding))
{
sb.Append($".button").Append("{")
.Append($"padding: {options.Padding};")
.AppendLine("}");
}
if (!string.IsNullOrEmpty(options?.Margin))
{
sb.Append($".button").Append("{")
.Append($"margin: {options.Margin};")
.AppendLine("}");
}
}
protected override void GenerateButtonStyles(StringBuilder sb, Theme theme, ThemeButtonOptions options)
{
sb.Append($".e-btn").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
.AppendLine("}");
sb.Append($".e-btn.small").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.SmallBorderRadius, Var( "--b-frolic-btn-padding-sm" ) )};")
.AppendLine("}");
sb.Append($".e-btn.plus").Append("{")
.Append($"padding: {GetBorderRadius( theme, options?.LargeBorderRadius, Var( "--b-frolic-btn-padding-lg" ) )};")
.AppendLine("}");
if (!string.IsNullOrEmpty(options?.Margin))
{
sb.Append($".e-btn").Append("{")
.Append($"margin: {options.Margin};")
.AppendLine("}");
}
if (options?.DisabledOpacity != null)
{
sb.Append($".e-btn[disabled]").Append("{")
.Append($"opacity: {options.DisabledOpacity};")
.AppendLine("}");
}
}
protected override void GenerateButtonStyles(StringBuilder sb, Theme theme, ThemeButtonOptions options)
{
sb.Append($".e-btn").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius )};")
.AppendLine("}");
sb.Append($".e-btn.small").Append("{")
.Append($"border-radius: {GetBorderRadius( theme, options?.SmallBorderRadius )};")
.AppendLine("}");
sb.Append($".e-btn.plus").Append("{")
.Append($"padding: {GetBorderRadius( theme, options?.LargeBorderRadius )};")
.AppendLine("}");
if (!string.IsNullOrEmpty(options.Margin))
{
sb.Append($".e-btn").Append("{")
.Append($"margin: {options.Margin};")
.AppendLine("}");
}
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var background = Var(ThemeVariables.ButtonBackground(variant));
var border = Var(ThemeVariables.ButtonBorder(variant));
var hoverBackground = Var(ThemeVariables.ButtonHoverBackground(variant));
var hoverBorder = Var(ThemeVariables.ButtonHoverBorder(variant));
var activeBackground = Var(ThemeVariables.ButtonActiveBackground(variant));
var activeBorder = Var(ThemeVariables.ButtonActiveBorder(variant));
var yiqBackground = Var(ThemeVariables.ButtonYiqBackground(variant));
var yiqHoverBackground = Var(ThemeVariables.ButtonYiqHoverBackground(variant));
var yiqActiveBackground = Var(ThemeVariables.ButtonYiqActiveBackground(variant));
var boxShadow = Var(ThemeVariables.ButtonBoxShadow(variant));
if (variant == "link")
{
sb
.Append($".btn-{variant}").Append("{")
.Append($"color: {background};")
.AppendLine("}");
sb.Append($".btn-{variant}:hover")
.Append("{")
.Append($"color: {hoverBackground};")
.AppendLine("}");
sb.Append($".btn-{variant}.disabled,")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: {ToHex( Darken( background, 15f ) )};")
.AppendLine("}");
}
else
{
sb.Append($".btn-{variant},")
.Append($"a.btn-{variant}")
.Append("{")
.Append($"color: {yiqBackground};")
.Append(GetGradientBg(theme, background, options?.GradientBlendPercentage))
.Append($"border-color: {border};")
.AppendLine("}");
sb.Append($".btn-{variant}:hover,")
.Append($"a.btn-{variant}:hover")
.Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: {hoverBorder};")
.AppendLine("}");
sb.Append($".btn-{variant}:focus,")
.Append($".btn-{variant}.focus,")
.Append($"a.btn-{variant}:focus,")
.Append($"a.btn-{variant}.focus")
.Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: {hoverBorder};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb.Append($".btn-{variant}.disabled,")
.Append($".btn-{variant}:disabled,")
.Append($"a.btn-{variant}.disabled,")
.Append($"a.btn-{variant}:disabled")
.Append("{")
.Append($"color: {yiqBackground};")
.Append($"background-color: {background};")
.Append($"border-color: {border};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb
.Append($".btn-{variant}:not(:disabled):not(.disabled):active,")
.Append($".btn-{variant}:not(:disabled):not(.disabled).active,")
.Append($".show>.btn-{variant}.dropdown-toggle,")
.Append($"a.btn-{variant}:not(:disabled):not(.disabled):active,")
.Append($"a.btn-{variant}:not(:disabled):not(.disabled).active,")
.Append($"a.show>.btn-{variant}.dropdown-toggle")
.Append("{")
.Append($"color: {yiqActiveBackground};")
.Append($"background-color: {activeBackground};")
.Append($"border-color: {activeBorder};")
.AppendLine("}");
sb
.Append($".btn-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($".btn-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($".show>.btn-{variant}.dropdown-toggle:focus,")
.Append($"a.btn-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($"a.btn-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($"a.show>.btn-{variant}.dropdown-toggle:focus")
.Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow}")
.AppendLine("}");
}
}
protected override void GenerateButtonOutlineVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var color = Var(ThemeVariables.OutlineButtonColor(variant));
var yiqColor = Var(ThemeVariables.OutlineButtonYiqColor(variant));
var boxShadow = Var(ThemeVariables.OutlineButtonBoxShadowColor(variant));
sb
.Append($".btn-outline-{variant},")
.Append($"a.btn-outline-{variant}")
.Append("{")
.Append($"color: {color};")
.Append($"border-color: {color};")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}:hover,")
.Append($"a.btn-outline-{variant}:hover")
.Append("{")
.Append($"color: {yiqColor};")
.Append($"background-color: {color};")
.Append($"border-color: {color};")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}:focus,")
.Append($".btn-outline-{variant}.focus,")
.Append($"a.btn-outline-{variant}:focus,")
.Append($"a.btn-outline-{variant}.focus")
.Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}.disabled,")
.Append($".btn-outline-{variant}:disabled,")
.Append($"a.btn-outline-{variant}.disabled,")
.Append($"a.btn-outline-{variant}:disabled")
.Append("{")
.Append($"color: {color};")
.Append("background-color: transparent;")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}:not(:disabled):not(.disabled):active,")
.Append($".btn-outline-{variant}:not(:disabled):not(.disabled).active,")
.Append($".show>.btn-outline-{variant}.dropdown-toggle,")
.Append($"a.btn-outline-{variant}:not(:disabled):not(.disabled):active,")
.Append($"a.btn-outline-{variant}:not(:disabled):not(.disabled).active,")
.Append($"a.show>.btn-outline-{variant}.dropdown-toggle")
.Append("{")
.Append($"color: {yiqColor};")
.Append($"background-color: {color};")
.Append($"border-color: {color};")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($".btn-outline-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($".show>.btn-outline-{variant}.dropdown-toggle:focus,")
.Append($"a.btn-outline-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($"a.btn-outline-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($"a.show>.btn-outline-{variant}.dropdown-toggle:focus")
.Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var background = Var(ThemeVariables.ButtonBackground(variant));
var border = Var(ThemeVariables.ButtonBorder(variant));
var hoverBackground = Var(ThemeVariables.ButtonHoverBackground(variant));
var hoverBorder = Var(ThemeVariables.ButtonHoverBorder(variant));
var activeBackground = Var(ThemeVariables.ButtonActiveBackground(variant));
var activeBorder = Var(ThemeVariables.ButtonActiveBorder(variant));
var yiqBackground = Var(ThemeVariables.ButtonYiqBackground(variant));
var yiqHoverBackground = Var(ThemeVariables.ButtonYiqHoverBackground(variant));
var yiqActiveBackground = Var(ThemeVariables.ButtonYiqActiveBackground(variant));
var boxShadow = Var(ThemeVariables.ButtonBoxShadow(variant));
sb.Append($".ant-btn-{variant}").Append("{")
.Append($"color: {yiqBackground} !important;")
.Append(GetGradientBg(theme, background, options?.GradientBlendPercentage, true))
.Append($"border-color: {border} !important;")
.AppendLine("}");
sb.Append($".ant-btn-{variant} > a:only-child").Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb.Append($".ant-btn-{variant}:hover,")
.Append($".ant-btn-{variant}:focus")
.Append("{")
.Append($"color: {yiqHoverBackground} !important;")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage, true))
.Append($"border-color: {hoverBorder} !important;")
.AppendLine("}");
sb.Append($".ant-btn-{variant}:hover > a:only-child,")
.Append($".ant-btn-{variant}:focus > a:only-child")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb
.Append($".btn-{variant}:active,")
.Append($".btn-{variant}.active,")
.Append($".btn-{variant}-active")
.Append("{")
.Append($"color: {yiqActiveBackground} !important;")
.Append($"background-color: {activeBackground} !important;")
.Append($"border-color: {activeBorder} !important;")
.AppendLine("}");
sb
.Append($".btn-{variant}:active > a:only-child,")
.Append($".btn-{variant}.active > a:only-child,")
.Append($".btn-{variant}-active > a:only-child")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb
.Append($".ant-btn-{variant}-disabled,")
.Append($".ant-btn-{variant}.disabled,")
.Append($".ant-btn-{variant}[disabled],")
.Append($".ant-btn-{variant}-disabled:hover,")
.Append($".ant-btn-{variant}.disabled:hover,")
.Append($".ant-btn-{variant}[disabled]:hover,")
.Append($".ant-btn-{variant}-disabled:focus,")
.Append($".ant-btn-{variant}.disabled:focus,")
.Append($".ant-btn-{variant}[disabled]:focus,")
.Append($".ant-btn-{variant}-disabled:active,")
.Append($".ant-btn-{variant}.disabled:active,")
.Append($".ant-btn-{variant}[disabled]:active,")
.Append($".ant-btn-{variant}-disabled.active,")
.Append($".ant-btn-{variant}.disabled.active,")
.Append($".ant-btn-{variant}[disabled].active")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: rgba(0, 0, 0, 0.25) !important;")
.Append($"background-color: #f5f5f5 !important;")
.Append($"border-color: #d9d9d9 !important;")
.Append($"text-shadow: none !important;")
.AppendLine("}");
sb
.Append($".ant-btn-{variant}-disabled > a:only-child,")
.Append($".ant-btn-{variant}.disabled > a:only-child,")
.Append($".ant-btn-{variant}[disabled] > a:only-child,")
.Append($".ant-btn-{variant}-disabled:hover > a:only-child,")
.Append($".ant-btn-{variant}.disabled:hover > a:only-child,")
.Append($".ant-btn-{variant}[disabled]:hover > a:only-child,")
.Append($".ant-btn-{variant}-disabled:focus > a:only-child,")
.Append($".ant-btn-{variant}.disabled:focus > a:only-child,")
.Append($".ant-btn-{variant}[disabled]:focus > a:only-child,")
.Append($".ant-btn-{variant}-disabled:active > a:only-child,")
.Append($".ant-btn-{variant}.disabled:active > a:only-child,")
.Append($".ant-btn-{variant}[disabled]:active > a:only-child,")
.Append($".ant-btn-{variant}-disabled.active > a:only-child,")
.Append($".ant-btn-{variant}.disabled.active > a:only-child,")
.Append($".ant-btn-{variant}[disabled].active")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
}
protected override void GenerateButtonOutlineVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var color = Var(ThemeVariables.OutlineButtonColor(variant));
var hoverColor = Var(ThemeVariables.OutlineButtonHoverColor(variant));
var activeColor = Var(ThemeVariables.OutlineButtonActiveColor(variant));
sb.Append($".ant-btn-outline-{variant}").Append("{")
.Append($"color: {color} !important;")
.Append($"background: transparent !important;")
.Append($"border-color: {color} !important;")
.AppendLine("}");
sb.Append($".ant-btn-outline-{variant} > a:only-child").Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb.Append($".ant-btn-outline-{variant}:hover,")
.Append($".ant-btn-outline-{variant}:focus")
.Append("{")
.Append($"color: {hoverColor} !important;")
.Append($"border-color: {hoverColor} !important;")
.AppendLine("}");
sb.Append($".ant-btn-outline-{variant}:hover > a:only-child,")
.Append($".ant-btn-outline-{variant}:focus > a:only-child")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb
.Append($".ant-btn-outline-{variant}:active,")
.Append($".ant-btn-outline-{variant}.active")
.Append("{")
.Append($"color: {activeColor} !important;")
.Append($"border-color: {activeColor} !important;")
.AppendLine("}");
sb
.Append($".ant-btn-outline-{variant}:active > a:only-child,")
.Append($".ant-btn-outline-{variant}.active > a:only-child")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
sb
.Append($".ant-btn-outline-{variant}-disabled,")
.Append($".ant-btn-outline-{variant}.disabled,")
.Append($".ant-btn-outline-{variant}[disabled],")
.Append($".ant-btn-outline-{variant}-disabled:hover,")
.Append($".ant-btn-outline-{variant}.disabled:hover,")
.Append($".ant-btn-outline-{variant}[disabled]:hover,")
.Append($".ant-btn-outline-{variant}-disabled:focus,")
.Append($".ant-btn-outline-{variant}.disabled:focus,")
.Append($".ant-btn-outline-{variant}[disabled]:focus,")
.Append($".ant-btn-outline-{variant}-disabled:active,")
.Append($".ant-btn-outline-{variant}.disabled:active,")
.Append($".ant-btn-outline-{variant}[disabled]:active,")
.Append($".ant-btn-outline-{variant}-disabled.active,")
.Append($".ant-btn-outline-{variant}.disabled.active,")
.Append($".ant-btn-outline-{variant}[disabled].active")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: rgba(0, 0, 0, 0.25) !important;")
.Append($"border-color: #d9d9d9 !important;")
.Append($"text-shadow: none !important;")
.AppendLine("}");
sb
.Append($".ant-btn-outline-{variant}-disabled > a:only-child,")
.Append($".ant-btn-outline-{variant}.disabled > a:only-child,")
.Append($".ant-btn-outline-{variant}[disabled] > a:only-child,")
.Append($".ant-btn-outline-{variant}-disabled:hover > a:only-child,")
.Append($".ant-btn-outline-{variant}.disabled:hover > a:only-child,")
.Append($".ant-btn-outline-{variant}[disabled]:hover > a:only-child,")
.Append($".ant-btn-outline-{variant}-disabled:focus > a:only-child,")
.Append($".ant-btn-outline-{variant}.disabled:focus > a:only-child,")
.Append($".ant-btn-outline-{variant}[disabled]:focus > a:only-child,")
.Append($".ant-btn-outline-{variant}-disabled:active > a:only-child,")
.Append($".ant-btn-outline-{variant}.disabled:active > a:only-child,")
.Append($".ant-btn-outline-{variant}[disabled]:active > a:only-child,")
.Append($".ant-btn-outline-{variant}-disabled.active > a:only-child,")
.Append($".ant-btn-outline-{variant}.disabled.active > a:only-child,")
.Append($".ant-btn-outline-{variant}[disabled].active")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: currentColor !important;")
.AppendLine("}");
}
protected override void GenerateButtonOutlineVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var color = Var(ThemeVariables.OutlineButtonColor(variant));
sb
.Append($".btn-outline-{variant},")
.Append($".btn-outline-{variant}.active,")
.Append($".btn-outline-{variant}:focus,")
.Append($".btn-outline-{variant}:hover,")
.Append($"a.btn-outline-{variant},")
.Append($"a.btn-outline-{variant}.active,")
.Append($"a.btn-outline-{variant}:focus,")
.Append($"a.btn-outline-{variant}:hover")
.Append("{")
.Append($"color: {color};")
.AppendLine("}");
sb
.Append($".btn-outline-{variant}.disabled,")
.Append($".btn-outline-{variant}:disabled,")
.Append($"a.btn-outline-{variant}.disabled,")
.Append($"a.btn-outline-{variant}:disabled")
.Append("{")
.Append($"color: {color};")
.AppendLine("}");
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var background = Var(ThemeVariables.ButtonBackground(variant));
var border = Var(ThemeVariables.ButtonBorder(variant));
var hoverBackground = Var(ThemeVariables.ButtonHoverBackground(variant));
var hoverBorder = Var(ThemeVariables.ButtonHoverBorder(variant));
var activeBackground = Var(ThemeVariables.ButtonActiveBackground(variant));
var activeBorder = Var(ThemeVariables.ButtonActiveBorder(variant));
var yiqBackground = Var(ThemeVariables.ButtonYiqBackground(variant));
var yiqHoverBackground = Var(ThemeVariables.ButtonYiqHoverBackground(variant));
var yiqActiveBackground = Var(ThemeVariables.ButtonYiqActiveBackground(variant));
var boxShadow = Var(ThemeVariables.ButtonBoxShadow(variant));
// Material provider have some special rules for buttons placed inside of modal footer. So to keep it
// consistent we need to apply the same styles as in the base generator.
sb
.Append($".modal-footer .btn-{variant},")
.Append($".modal-footer a.btn-{variant}")
.Append("{")
.Append($"color: {yiqBackground};")
.Append(GetGradientBg(theme, background, options?.GradientBlendPercentage))
.Append($"border-color: {border};")
.AppendLine("}");
sb
.Append($".modal-footer .btn-{variant}:hover,")
.Append($".modal-footer a.btn-{variant}:hover")
.Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: {hoverBorder};")
.AppendLine("}");
sb
.Append($".modal-footer .btn-{variant}:focus,")
.Append($".modal-footer .btn-{variant}.focus,")
.Append($".modal-footer a.btn-{variant}:focus,")
.Append($".modal-footer a.btn-{variant}.focus")
.Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: {hoverBorder};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb
.Append($".modal-footer .btn-{variant}.disabled,")
.Append($".modal-footer .btn-{variant}:disabled,")
.Append($".modal-footer a.btn-{variant}.disabled,")
.Append($".modal-footer a.btn-{variant}:disabled")
.Append("{")
.Append($"color: {yiqBackground};")
.Append($"background-color: {background};")
.Append($"border-color: {border};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb
.Append($".modal-footer .btn-{variant}:not(:disabled):not(.disabled):active,")
.Append($".modal-footer .btn-{variant}:not(:disabled):not(.disabled).active,")
.Append($".modal-footer .show>.btn-{variant}.dropdown-toggle,")
.Append($".modal-footer a.btn-{variant}:not(:disabled):not(.disabled):active,")
.Append($".modal-footer a.btn-{variant}:not(:disabled):not(.disabled).active,")
.Append($".modal-footer a.show>.btn-{variant}.dropdown-toggle")
.Append("{")
.Append($"color: {yiqActiveBackground};")
.Append($"background-color: {activeBackground};")
.Append($"border-color: {activeBorder};")
.AppendLine("}");
sb
.Append($".modal-footer .btn-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($".modal-footer .btn-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($".modal-footer .show>.btn-{variant}.dropdown-toggle:focus,")
.Append($".modal-footer a.btn-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($".modal-footer a.btn-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($".modal-footer a.show>.btn-{variant}.dropdown-toggle:focus")
.Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow}")
.AppendLine("}");
base.GenerateButtonVariantStyles(sb, theme, variant, options);
}
protected override void GenerateButtonOutlineVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions buttonOptions)
{
var color = Var(ThemeVariables.OutlineButtonColor(variant));
var yiqColor = Var(ThemeVariables.OutlineButtonYiqColor(variant));
//var boxShadow = Var( ThemeVariables.OutlineButtonBoxShadowColor( variant ) );
sb.Append($".button.is-{variant}.is-outlined").Append("{")
.Append($"color: {color};")
.Append($"border-color: {color};")
.Append($"background-color: transparent;")
.Append($"background: transparent;")
.AppendLine("}");
sb.Append($".button.is-{variant}.is-outlined:hover,")
.Append($".button.is-{variant}.is-outlined.is-hovered,")
.Append($".button.is-{variant}.is-outlined:focus,")
.Append($".button.is-{variant}.is-outlined.is-focused").Append("{")
.Append($"color: {yiqColor};")
.Append($"background-color: white;")
.Append($"border-color: {color};")
.AppendLine("}");
sb.Append($".button.is-{variant}.is-outlined.is-loading::after").Append("{")
.Append($"border-color: transparent transparent white white;")
.AppendLine("}");
sb.Append($".button.is-{variant}.is-outlined[disabled],").Append($"fieldset[disabled] .button.is-{variant}.is-outlined").Append("{")
.Append($"color: {color};")
.Append($"background-color: transparent;")
.Append($"border-color: {color};")
.Append($"box-shadow: none;")
.AppendLine("}");
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var background = Var(ThemeVariables.ButtonBackgrund(variant));
var border = Var(ThemeVariables.ButtonBorder(variant));
var hoverBackground = Var(ThemeVariables.ButtonHoverBackground(variant));
var hoverBorder = Var(ThemeVariables.ButtonHoverBorder(variant));
var activeBackground = Var(ThemeVariables.ButtonActiveBackground(variant));
var activeBorder = Var(ThemeVariables.ButtonActiveBorder(variant));
var yiqBackground = Var(ThemeVariables.ButtonYiqBackground(variant));
var yiqHoverBackground = Var(ThemeVariables.ButtonYiqHoverBackground(variant));
var yiqActiveBackground = Var(ThemeVariables.ButtonYiqActiveBackground(variant));
var boxShadow = Var(ThemeVariables.ButtonBoxShadow(variant));
sb.Append($".button.is-{variant}").Append("{")
//.Append( $"color: {yiqBackground};" )
.Append(GetGradientBg(theme, background, options?.GradientBlendPercentage))
.Append($"border-color: transparent;")
.AppendLine("}");
sb.Append($".button.is-{variant}:hover,").Append($".button.is-{variant}.is-hovered").Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: {hoverBorder};")
.AppendLine("}");
sb.Append($".button.is-{variant}:focus,").Append($".button.is-{variant}.is-focused").Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GetGradientBg(theme, hoverBackground, options?.GradientBlendPercentage))
.Append($"border-color: transparent;")
.AppendLine("}");
sb.Append($".button.is-{variant}:focus:not(:active),").Append($".button.is-{variant}.is-focused:not(:active)").Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".125rem"} {boxShadow};")
.AppendLine("}");
sb.Append($".button.is-{variant}[disabled],").Append($"fieldset[disabled] .button.is-{variant}").Append("{")
.Append($"color: {yiqBackground};")
.Append($"background-color: {background};")
.Append($"border-color: {border};")
.Append($"box-shadow: none;")
.AppendLine("}");
sb
.Append($".button.is-{variant}:active,").Append($".button.is-{variant}.is-active").Append("{")
.Append($"color: {yiqActiveBackground};")
.Append($"background-color: {activeBackground};")
.Append($"border-color: {activeBorder};")
.AppendLine("}");
sb
.Append($".button.is-{variant}.is-loading::after").Append("{")
.Append($"border-color: transparent transparent {activeBorder} {activeBorder};")
.AppendLine("}");
//sb
// .Append( $".btn-{variant}:not(:disabled):not(.disabled):active:focus," )
// .Append( $".btn-{variant}:not(:disabled):not(.disabled).active:focus," )
// .Append( $".show>.btn-{variant}.dropdown-toggle:focus" )
// .Append( "{" )
// .Append( $"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow}" )
// .AppendLine( "}" );
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
var background = Var($"--b-button-{variant}-background");
var border = Var($"--b-button-{variant}-border");
var hoverBackground = Var($"--b-button-{variant}-hover-background");
var hoverBorder = Var($"--b-button-{variant}-hover-border");
var activeBackground = Var($"--b-button-{variant}-active-background");
var activeBorder = Var($"--b-button-{variant}-active-border");
var yiqBackground = Var($"--b-button-{variant}-yiq-background");
var yiqHoverBackground = Var($"--b-button-{variant}-yiq-hover-background");
var yiqActiveBackground = Var($"--b-button-{variant}-yiq-active-background");
var boxShadow = Var($"--b-button-{variant}-box-shadow");
sb.Append($".btn-{variant}").Append("{")
.Append($"color: {yiqBackground};")
.Append(GradientBg(theme, background))
.Append($"border-color: {border};")
.AppendLine("}");
sb.Append($".btn-{variant}:hover").Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GradientBg(theme, hoverBackground))
.Append($"border-color: {hoverBorder};")
.AppendLine("}");
sb.Append($".btn-{variant}:focus,")
.Append($".btn-{variant}.focus")
.Append("{")
.Append($"color: {yiqHoverBackground};")
.Append(GradientBg(theme, hoverBackground))
.Append($"border-color: {hoverBorder};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb.Append($".btn-{variant}.disabled,")
.Append($".btn-{variant}:disabled")
.Append("{")
.Append($"color: {yiqBackground};")
.Append($"background-color: {background};")
.Append($"border-color: {border};")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
.AppendLine("}");
sb
.Append($".btn-{variant}:not(:disabled):not(.disabled):active,")
.Append($".btn-{variant}:not(:disabled):not(.disabled).active,")
.Append($".show>.btn-{variant}.dropdown-toggle")
.Append("{")
.Append($"color: {yiqActiveBackground};")
.Append($"background-color: {activeBackground};")
.Append($"border-color: {activeBorder};")
.AppendLine("}");
sb
.Append($".btn-{variant}:not(:disabled):not(.disabled):active:focus,")
.Append($".btn-{variant}:not(:disabled):not(.disabled).active:focus,")
.Append($".show>.btn-{variant}.dropdown-toggle:focus")
.Append("{")
.Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow}")
.AppendLine("}");
}
protected override void GenerateButtonOutlineVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions buttonOptions)
{
var color = Var(ThemeVariables.OutlineButtonColor(variant));
//var yiqColor = Var( ThemeVariables.OutlineButtonYiqColor( variant ) );
//var boxShadow = Var( ThemeVariables.OutlineButtonBoxShadowColor( variant ) );
sb.Append($".e-btn.outlined.{variant}").Append("{")
.Append($"color: {color};")
.Append($"background-color: white;")
.Append($"background: white;")
.Append($"border-color: {color};")
.AppendLine("}");
sb.Append($".e-btn.outlined.{variant}:hover,")
.Append($".e-btn.outlined.{variant}:focus")
.Append("{")
.Append($"background-color: {color};")
.AppendLine("}");
//sb.Append( $".e-btn.outlined.{variant}.disabled" ).Append( $".e-btn.outlined.{variant}:disabled" ).Append( "{" )
// .Append( $"color: {color};" )
// .Append( $"background-color: transparent;" )
// .AppendLine( "}" );
//sb
// .Append( $".e-btn.outlined.{variant}:not(:disabled):not(.disabled):active," )
// .Append( $".e-btn.outlined.{variant}:not(:disabled):not(.disabled).active," )
// .Append( $".show>.e-btn.outlined.{variant}.dropdown-toggle" )
// .Append( "{" )
// .Append( $"color: {yiqColor};" )
// .Append( $"background-color: {color};" )
// .Append( $"border-color: {color};" )
// .AppendLine( "}" );
//sb
// .Append( $".e-btn.outlined.{variant}:not(:disabled):not(.disabled):active:focus," )
// .Append( $".e-btn.outlined.{variant}:not(:disabled):not(.disabled).active:focus," )
// .Append( $".show>.e-btn.outlined.{variant}.dropdown-toggle:focus" )
// .Append( "{" )
// .Append( $"box-shadow: 0 0 0 2rem {boxShadow};" )
// .AppendLine( "}" );
}
protected override void GenerateButtonVariantStyles(StringBuilder sb, Theme theme, string variant, ThemeButtonOptions options)
{
throw new System.NotImplementedException();
}
