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 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);
        }
Beispiel #3
0
        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 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( "}" );
        }