Beispiel #1
0
        protected override void GenerateBackgroundVariantStyles(StringBuilder sb, Theme theme, string variant)
        {
            sb.Append($".has-background-{variant}").Append("{")
            .Append($"background-color: {Var( ThemeVariables.BackgroundColor( variant ) )} !important;")
            .AppendLine("}");

            sb.Append($".hero-{variant}").Append("{")
            .Append($"background-color: {Var( ThemeVariables.BackgroundColor( variant ) )} !important;")
            .Append($"color: {ToHex( Contrast( theme, Var( ThemeVariables.BackgroundColor( variant ) ) ) )} !important;")
            .AppendLine("}");
        }
Beispiel #2
0
 protected override void GenerateTabsStyles(StringBuilder sb, Theme theme, ThemeTabsOptions options)
 {
     if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
     {
         sb
         .Append(".tabs.is-toggle li.is-active a")
         .Append("{")
         .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};")
         .AppendLine("}");
     }
 }
Beispiel #3
0
        protected override void GenerateProgressStyles(StringBuilder sb, Theme theme, ThemeProgressOptions options)
        {
            sb.Append($".progress").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb.Append($".progress-bar").Append("{")
                .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");
            }
        }
Beispiel #4
0
        protected override void GenerateStepsVariantStyles(StringBuilder sb, Theme theme, string variant, string inBackgroundColor, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-finish .ant-steps-item-content .ant-steps-item-title").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-wait .ant-steps-item-icon").Append("{")
            .Append($"border-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIconYiq( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-wait .ant-steps-item-content .ant-steps-item-title").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-active.ant-steps-item-finish .ant-steps-item-icon").Append("{")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq, Var( ThemeVariables.White ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-active.ant-steps-item-process .ant-steps-icon").Append("{")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq, Var( ThemeVariables.White ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant}.ant-steps-item-active.ant-steps-item-process .ant-steps-item-content .ant-steps-item-title").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant} .ant-steps-item-icon").Append("{")
            .Append($"border-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant} .ant-steps-item-icon .ant-steps-icon").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item-{variant} .ant-steps-item-content .ant-steps-item-title").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .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("{")
            .Append($"color: {color};")
            .Append($"border-color: {color};")
            .AppendLine("}");

            sb.Append($".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("{")
            .Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
            .AppendLine("}");

            sb.Append($".btn-outline-{variant}.disabled,")
            .Append($".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("{")
            .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("{")
            .Append($"box-shadow: 0 0 0 {options?.BoxShadowSize ?? ".2rem"} {boxShadow};")
            .AppendLine("}");
        }
        protected override void GenerateListGroupItemStyles(StringBuilder sb, Theme theme, ThemeListGroupItemOptions options)
        {
            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                var white   = Var(ThemeVariables.White);
                var primary = Var(ThemeVariables.Color("primary"));

                sb
                .Append(".list-group-item.active")
                .Append("{")
                .Append($"color: {white};")
                .Append(GetGradientBg(theme, primary, options?.GradientBlendPercentage))
                .Append($"border-color: {primary};")
                .AppendLine("}");
            }
        }
        protected override void GenerateBarStyles(StringBuilder sb, Theme theme, ThemeBarOptions options)
        {
            foreach (var(variant, _) in theme.ValidBackgroundColors)
            {
                var yiqColor = Var(ThemeVariables.BackgroundYiqColor(variant));

                if (string.IsNullOrEmpty(yiqColor))
                {
                    continue;
                }

                sb.Append($".navbar.bg-{variant} .navbar-brand .nav-item .nav-link").Append("{")
                .Append($"color: {yiqColor};")
                .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("{")
            .Append($"color: {color};")
            .AppendLine("}");

            sb.Append($".btn-outline-{variant}.disabled,")
            .Append($".btn-outline-{variant}:disabled")
            .Append("{")
            .Append($"color: {color};")
            .AppendLine("}");
        }
        protected override void GenerateStepsStyles(StringBuilder sb, Theme theme, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append($".ant-steps-item.ant-steps-item-active.ant-steps-item-process.ant-steps-item-finish .ant-steps-item-icon").Append("{")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item.ant-steps-item-active.ant-steps-item-process.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq, Var( ThemeVariables.White ) )};")
            .AppendLine("}");

            sb
            .Append($".ant-steps-item.ant-steps-item-active.ant-steps-item-process .ant-steps-item-icon").Append("{")
            .Append($"background: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");
        }
        protected override void GeneratePaginationStyles(StringBuilder sb, Theme theme, ThemePaginationOptions options)
        {
            sb.Append($".pagination-link,.pagination-previous,.pagination-next").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append($".pagination.is-large .pagination-link,.pagination-previous,.pagination-next").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.LargeBorderRadius, Var( ThemeVariables.BorderRadiusLarge ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb.Append($".pagination-link.is-current,.pagination-previous.is-current,.pagination-next.is-current").Append("{")
                .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: {Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");
            }
        }
Beispiel #11
0
        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 GenerateStepsVariantStyles(StringBuilder sb, Theme theme, string variant, string inBackgroundColor, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append($".step-{variant} .step-circle").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .Append($"border-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-completed .step-circle").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIconYiq( variant ) )};")
            .Append($"background-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .Append($"border-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-completed .step-circle::before").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-completed .step-text").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-active .step-circle").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq, Var( ThemeVariables.White ) )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-active::before").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append($".step-{variant}.step-active .step-text").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");
        }
        protected override void GenerateInputStyles(StringBuilder sb, Theme theme, ThemeInputOptions options)
        {
            sb
            .Append($".flatpickr-day.selected").Append("{")
            .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
            .AppendLine("}");

            sb
            .Append($".flatpickr-time .flatpickr-am-pm").Append("{")
            .Append($"color: { Var( ThemeVariables.Color( "primary" ) )};")
            .AppendLine("}");

            sb
            .Append($".flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time input:focus").Append("{")
            .Append($"background: { ToHex( Transparency( Var( ThemeVariables.Color( "primary" ) ), 16 ) )};")
            .Append($"color: { Var( ThemeVariables.Color( "primary" ) )};")
            .AppendLine("}");

            base.GenerateInputStyles(sb, theme, options);
        }
        protected override void GenerateTabsStyles(StringBuilder sb, Theme theme, ThemeTabsOptions options)
        {
            sb.Append($".nav-tabs .nav-link").Append("{")
            .Append($"border-top-left-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .Append($"border-top-right-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append($".nav-pills .nav-link").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb
                .Append($".nav-pills .nav-link.active,")
                .Append($".nav-pills .show>.nav-link")
                .Append("{")
                .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");
            }
        }
Beispiel #15
0
        protected override void GenerateStepsVariantStyles(StringBuilder sb, Theme theme, string variant, string inBackgroundColor, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append($".steps .step-item.is-{variant}::before").Append("{")
            .Append($"background: linear-gradient(to left, #dbdbdb 50%, {Var( ThemeVariables.VariantStepsItemIcon( variant ) )} 50%);")
            .Append("background-size: 200% 100%;")
            .Append("background-position: right bottom;")
            .AppendLine("}");

            sb
            .Append($".steps .step-item.is-{variant} .step-marker").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIconYiq( variant ) )};")
            .Append($"background-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".steps .step-item.is-{variant}.is-completed::before").Append("{")
            .Append("background-position: left bottom;")
            .AppendLine("}");

            sb
            .Append($".steps .step-item.is-{variant}.is-completed .step-marker").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconCompletedYiq )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconCompleted )};")
            .AppendLine("}");

            sb
            .Append($".steps .step-item.is-{variant}.is-active::before").Append("{")
            .Append("background-position: left bottom;")
            .AppendLine("}");

            sb
            .Append($".steps .step-item.is-{variant}.is-active.is-completed .step-marker,")
            .Append($".steps .step-item.is-{variant}.is-active .step-marker").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq, Var( ThemeVariables.White ) )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");
        }
        protected override void GenerateInputStyles(StringBuilder sb, Theme theme, ThemeInputOptions options)
        {
            base.GenerateInputStyles(sb, theme, options);

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                var focusColor = Var(ThemeVariables.Color("primary"));

                sb
                .Append(".form-control:focus,")
                .Append(".custom-select:focus")
                .Append("{")
                .Append($"border-color: {focusColor};")
                .Append($"box-shadow: inset 0 -2px 0 -1px {focusColor};")
                .AppendLine("}");

                sb.Append(".b-is-autocomplete.b-is-autocomplete-multipleselection.focus")
                .Append("{")
                .Append("border:none;")
                .Append("box-shadow: none;")
                .AppendLine("}");

                sb
                .Append("select.custom-select:focus[multiple], select.custom-select:focus[size]:not([size=\"1\"]), select.form-control:focus[multiple], select.form-control:focus[size]:not([size=\"1\"]), textarea.form-control:focus:not([rows=\"1\"])")
                .Append("{")
                .Append($"border-color: {focusColor};")
                .Append($"box-shadow: inset 2px 2px 0 -1px {focusColor}, inset -2px -2px 0 -1px {focusColor};")
                .AppendLine("}");

                sb
                .Append(".form-group:focus-within label:not(.custom-control-label):not(.form-check-label):not(.btn):not(.card-link), [class*=form-ripple]:focus-within label:not(.custom-control-label):not(.form-check-label):not(.btn):not(.card-link)")
                .Append("{")
                .Append($"color: {focusColor};")
                .AppendLine("}");
            }
        }
Beispiel #17
0
        protected override void GenerateTabsStyles(StringBuilder sb, Theme theme, ThemeTabsOptions options)
        {
            sb.Append($".ant-tabs .ant-tabs-tab").Append("{")
            .Append($"border-top-left-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .Append($"border-top-right-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append($".ant-tabs-pills .ant-tabs-nav .ant-tabs-tab").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb
                .Append($".ant-tabs-pills .ant-tabs-nav .ant-tabs-tab-active")
                .Append("{")
                .Append($"color: {Var( ThemeVariables.White )};")
                .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append($".ant-tabs-nav .ant-tabs-tab:active,")
                .Append($".ant-tabs-nav .ant-tabs-tab-active")
                .Append("{")
                .Append($"color: {Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                var hoverColor = ToHex(Lighten(Var(ThemeVariables.Color("primary")), 20f));

                sb
                .Append($".ant-tabs-nav .ant-tabs-tab:hover")
                .Append("{")
                .Append($"color: {hoverColor};")
                .AppendLine("}");
            }
        }
        protected override void GenerateStepsStyles(StringBuilder sb, Theme theme, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append(".step-completed .step-circle").Append("{")
            .Append($"color: {Var( ThemeVariables.White )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconCompleted, Var( ThemeVariables.Color( "success" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconCompleted, Var( ThemeVariables.Color( "success" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".step-completed .step-circle::before").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconCompleted, Var( ThemeVariables.Color( "success" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".step-completed .step-text").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemTextCompleted, Var( ThemeVariables.Color( "success" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".step-active .step-circle").Append("{")
            .Append($"color: {Var( ThemeVariables.White )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .Append($"border-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".step-active .step-circle::before").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".step-active .step-text").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemTextActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");
        }
        protected override void GenerateInputStyles(StringBuilder sb, Theme theme, ThemeInputOptions options)
        {
            sb.Append(".form-control").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".input-group-text").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".form-select").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".form-check:not(.form-switch) .form-check-input[type=checkbox]").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(options?.Color))
            {
                sb.Append(".form-control").Append("{")
                .Append($"color: {options.Color};")
                .AppendLine("}");

                sb.Append(".input-group-text").Append("{")
                .Append($"color: {options.Color};")
                .AppendLine("}");

                sb.Append(".form-select").Append("{")
                .Append($"color: {options.Color};")
                .AppendLine("}");
            }

            if (!string.IsNullOrEmpty(options?.CheckColor))
            {
                GenerateInputCheckEditStyles(sb, theme, options);
            }

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                var focusColor = ToHex(Lighten(Var(ThemeVariables.Color("primary")), 75f));

                sb
                .Append(".form-control:focus,")
                .Append(".form-select:focus,")
                .Append(".b-is-autocomplete.b-is-autocomplete-multipleselection.focus")
                .Append("{")
                .Append($"border-color: {focusColor};")
                .Append($"box-shadow: 0 0 0 {theme.ButtonOptions?.BoxShadowSize ?? ".2rem"} {focusColor};")
                .AppendLine("}");
            }

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb
                .Append(".flatpickr-months .flatpickr-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-next-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-prev-month:hover svg")
                .Append("{")
                .Append($"fill: { Var( ThemeVariables.Color( "primary" ) )} !important;")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day:hover").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1))").Append("{")
                .Append($"box-shadow: -10px 0 0 { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today").Append("{")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today:hover").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month.selected").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                //sb
                //    .Append( $".flatpickr-time .flatpickr-am-pm" ).Append( "{" )
                //    .Append( $"color: { Var( ThemeVariables.Color( "primary" ) )};" )
                //    .AppendLine( "}" );

                //sb
                //    .Append( $".flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time input:focus" ).Append( "{" )
                //    .Append( $"background: { ToHex( Transparency( Var( ThemeVariables.Color( "primary" ) ), 16 ) )};" )
                //    .Append( $"color: { Var( ThemeVariables.Color( "primary" ) )};" )
                //    .AppendLine( "}" );
            }

            sb.Append($".form-range::-webkit-slider-thumb")
            .Append("{")
            .Append($"background-color: { Var( ThemeVariables.Color( "primary" ) )};")
            .AppendLine("}");

            sb.Append($".form-range:focus::-webkit-slider-thumb")
            .Append("{")
            .Append($"box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 75f ) )};")
            .AppendLine("}");

            sb.Append($".form-range::-webkit-slider-thumb:active")
            .Append("{")
            .Append($"background-color: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 70f ) )};")
            .AppendLine("}");
        }
Beispiel #20
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("}");
        }
Beispiel #21
0
        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 GenerateStepsVariantStyles(StringBuilder sb, Theme theme, string variant, string inBackgroundColor, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append($".stepper-{variant}.done .stepper-icon").Append("{")
            .Append($"background-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".stepper-{variant}.done .stepper-text").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".stepper-{variant}.active .stepper-icon").Append("{")
            .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append($".stepper-{variant}.active .stepper-text").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemText( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".stepper-{variant} .stepper-icon").Append("{")
            .Append($"background-color: {Var( ThemeVariables.VariantStepsItemIcon( variant ) )};")
            .AppendLine("}");

            sb
            .Append($".stepper-{variant} .stepper-icon").Append("{")
            .Append($"color: {Var( ThemeVariables.VariantStepsItemIconYiq( variant ) )};")
            .AppendLine("}");
        }
Beispiel #23
0
        protected override void GenerateInputStyles(StringBuilder sb, Theme theme, ThemeInputOptions options)
        {
            sb.Append(".input").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".select select").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".textarea").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".b-is-autocomplete.b-is-autocomplete-multipleselection").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(options?.CheckColor))
            {
                GenerateInputCheckEditStyles(sb, theme, options);
            }

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb
                .Append(".flatpickr-months .flatpickr-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-next-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-prev-month:hover svg")
                .Append("{")
                .Append($"fill: { Var( ThemeVariables.Color( "primary" ) )} !important;")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day:hover").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1))").Append("{")
                .Append($"box-shadow: -10px 0 0 { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today").Append("{")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today:hover").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month.selected").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .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 GenerateBorderVariantStyles(StringBuilder sb, Theme theme, string variant)
 {
     sb.Append($".border-{variant}").Append("{")
     .Append($"border-color: {Var( ThemeVariables.BackgroundColor( variant ) )} !important;")
     .AppendLine("}");
 }
 protected override void GenerateStepsStyles(StringBuilder sb, Theme theme, ThemeStepsOptions stepsOptions)
 {
     sb
     .Append($".stepper.active .stepper-icon").Append("{")
     .Append($"color: {Var( ThemeVariables.StepsItemIconActiveYiq )};")
     .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
     .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("}");
            }
        }
Beispiel #28
0
        protected override void GenerateStepsStyles(StringBuilder sb, Theme theme, ThemeStepsOptions stepsOptions)
        {
            sb
            .Append(".steps .step-item.is-completed::before").Append("{")
            .Append("background-position: left bottom;")
            .AppendLine("}");

            sb
            .Append(".steps .step-item.is-completed .step-marker").Append("{")
            .Append($"color: {Var( ThemeVariables.White )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconCompleted, Var( ThemeVariables.Color( "success" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".steps .step-item.is-active.is-completed .step-marker,")
            .Append(".steps .step-item.is-active .step-marker").Append("{")
            .Append($"color: {Var( ThemeVariables.White )};")
            .Append($"background-color: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .AppendLine("}");

            sb
            .Append(".steps .step-item.is-active::before").Append("{")
            .Append($"background: {Var( ThemeVariables.StepsItemIconActive, Var( ThemeVariables.Color( "primary" ) ) )};")
            .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 #30
0
        protected override void GenerateInputStyles(StringBuilder sb, Theme theme, ThemeInputOptions options)
        {
            sb.Append(".ant-form-item input").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".ant-input-group-addon:first-child").Append("{")
            .Append($"border-top-left-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .Append($"border-bottom-left-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".ant-input-group-addon:last-child").Append("{")
            .Append($"border-top-right-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .Append($"border-bottom-right-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".ant-select-selector, .ant-select-selector input").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )} !important;")
            .AppendLine("}");

            sb.Append(".ant-checkbox-inner").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            sb.Append(".ant-upload button").Append("{")
            .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};")
            .AppendLine("}");

            if (!string.IsNullOrEmpty(options?.Color))
            {
                sb.Append(".ant-input").Append("{")
                .Append($"color: {options.Color};")
                .AppendLine("}");

                //sb.Append( $".input-group-text" ).Append( "{" )
                //    .Append( $"color: {options.Color};" )
                //    .AppendLine( "}" );

                sb.Append(".ant-select-selection-search-input").Append("{")
                .Append($"color: {options.Color};")
                .AppendLine("}");
            }

            if (!string.IsNullOrEmpty(options?.CheckColor))
            {
                GenerateInputCheckEditStyles(sb, theme, options);
            }

            if (!string.IsNullOrEmpty(options?.SliderColor))
            {
                GenerateInputSliderStyles(sb, theme, options);
            }

            if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary))
            {
                sb
                .Append(".flatpickr-months .flatpickr-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-next-month:hover svg,")
                .Append(".flatpickr-months .flatpickr-prev-month:hover svg")
                .Append("{")
                .Append($"fill: { Var( ThemeVariables.Color( "primary" ) )} !important;")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day:hover").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1))").Append("{")
                .Append($"box-shadow: -10px 0 0 { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today").Append("{")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-day.today:hover").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .Append($"border-color: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus").Append("{")
                .Append($"background: { ToHex( Lighten( Var( ThemeVariables.Color( "primary" ) ), 90f ) )};")
                .AppendLine("}");

                sb
                .Append(".flatpickr-monthSelect-month.selected").Append("{")
                .Append($"background: { Var( ThemeVariables.Color( "primary" ) )};")
                .AppendLine("}");
            }
        }