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 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("}"); } }
protected override void GenerateProgressStyles(StringBuilder sb, Theme theme, ThemeProgressOptions options) { sb .Append($".ant-progress-inner,") .Append($".ant-progress-bg") .Append("{") .Append($"border-radius: {GetBorderRadius( theme, options?.BorderRadius, Var( ThemeVariables.BorderRadius ) )};") .AppendLine("}"); if (!string.IsNullOrEmpty(theme.ColorOptions?.Primary)) { sb.Append($".ant-progress-bg").Append("{") .Append($"background-color: {Var( ThemeVariables.Color( "primary" ) )};") .AppendLine("}"); } base.GenerateProgressStyles(sb, theme, options); }
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("}"); } }
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 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 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 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("}"); } }
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("}"); } }
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("}"); }
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("}"); }
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 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 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 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("}"); } }