protected override void ApplyStyles()
{
try
{
var theme = ThemingEngine.DefaultTheme.Value;
var rootStyles = new List <Style>();
var nameRootStyle = new Style();
nameRootStyle = "ms-Checkbox";
rootStyles.Add(nameRootStyle);
var baseRootStyles = new Style
{
Display = "flex",
Position = Position.Relative
};
rootStyles.Add(baseRootStyles);
if (this.Reversed)
{
var reversedStyle = new Style();
reversedStyle = "reversed";
rootStyles.Add(reversedStyle);
}
if (this.isChecked)
{
var checkedStyle = new Style();
checkedStyle = "is-checked";
rootStyles.Add(checkedStyle);
}
if (this.Disabled)
{
var disabledStyle = new Style();
disabledStyle = "is-disabled";
rootStyles.Add(disabledStyle);
}
else
{
var disabledStyle = new Style();
disabledStyle = "is-enabled";
rootStyles.Add(disabledStyle);
}
var extraClasses = new Style();
extraClasses = this.ClassNames;
rootStyles.Add(extraClasses);
var baseInputStyles = new Style
{
Position = Position.Absolute,
Background = "none",
Opacity = 0,
//Selectors =
// {
// {
// ".${IsFocusVisibleClassName} &:focus + label",
// new Extensions.MergeStyles.Style
// {
// Outline = $"1px solid {theme.Palette.NeutralSecondary}",
// OutlineOffset = "2px",
// Selectors =
// {
// {
// CommonStyles.HighContrastSelector,
// new Extensions.MergeStyles.Style
// {
// Outline = "1px solid ActiveBorder"
// }
// }
// }
// }
// }
// }
};
var nameLabelStyle = new Style();
nameLabelStyle = "ms-Checkbox-label";
var fontLabelStyles = theme.Fonts.Medium;
var baseLabelStyles = new Extensions.MergeStyles.Style
{
Display = "flex",
AlignItems = Extensions.MergeStyles.AlignItems.FlexStart,
Cursor = this.Disabled ? "default" : "pointer",
Position = Extensions.MergeStyles.Position.Relative,
UserSelect = Extensions.MergeStyles.UserSelect.None,
TextAlign = "left"
};
//labelStyles.Add(baseLabelStyles);
if (!this.Disabled)
{
if (!this.isChecked)
{
var highContrastCheckboxStyle = new Style()
{
BorderColor = "Highlight"
};
var hoverSelectorCheckboxStyle = new Style()
{
BorderColor = theme.SemanticColors.InputBackgroundChecked
};
hoverSelectorCheckboxStyle.Selectors.Add(CommonStyles.HighContrastSelector, highContrastCheckboxStyle);
baseLabelStyles.Selectors.Add(":hover .ms-Checkbox-checkbox", hoverSelectorCheckboxStyle);
var focusSelectorCheckboxStyle = new Style()
{
BorderColor = theme.SemanticColors.InputBackgroundChecked
};
baseLabelStyles.Selectors.Add(":focus .ms-Checkbox-checkbox", focusSelectorCheckboxStyle);
var highContrastHoverCheckmarkStyle = new Style()
{
BorderColor = "Highlight"
};
var hoverSelectorCheckmarkStyle = new Style()
{
Color = theme.SemanticColors.InputBorder,
Opacity = 1
};
hoverSelectorCheckmarkStyle.Selectors.Add(CommonStyles.HighContrastSelector, highContrastHoverCheckmarkStyle);
baseLabelStyles.Selectors.Add(":hover .ms-Checkbox-checkmark", hoverSelectorCheckmarkStyle);
}
//else if (this.Checked.HasValue && this.Checked.Value)
else if (this.isChecked)
{
var hoverSelectorCheckboxStyle = new Style()
{
Background = theme.SemanticColors.InputBackgroundCheckedHovered,
BorderColor = theme.SemanticColors.InputBackgroundCheckedHovered
};
baseLabelStyles.Selectors.Add(":hover .ms-Checkbox-checkbox", hoverSelectorCheckboxStyle);
var focusSelectorCheckboxStyle = new Style()
{
Background = theme.SemanticColors.InputBackgroundCheckedHovered,
BorderColor = theme.SemanticColors.InputBackgroundCheckedHovered
};
baseLabelStyles.Selectors.Add(":focus .ms-Checkbox-checkbox", focusSelectorCheckboxStyle);
var highContrastSelectorStyles = new Style();
highContrastSelectorStyles.Selectors.Add(":hover .ms-Checkbox-checkbox", new Style
{
Background = "Window",
BorderColor = "Highlight"
});
highContrastSelectorStyles.Selectors.Add(":focus .ms-Checkbox-checkbox", new Style
{
Background = "Highlight"
});
highContrastSelectorStyles.Selectors.Add(":focus:hover .ms-Checkbox-checkbox", new Style
{
Background = "Highlight"
});
highContrastSelectorStyles.Selectors.Add(":focus:hover .ms-Checkbox-checkmark", new Style
{
Color = "Window"
});
highContrastSelectorStyles.Selectors.Add(":hover .ms-Checkbox-checkmark", new Style
{
Color = "Highlight"
});
baseLabelStyles.Selectors.Add(CommonStyles.HighContrastSelector, highContrastSelectorStyles);
}
baseLabelStyles.Selectors.Add(":hover .ms-Checkbox-text", new Style
{
Color = theme.SemanticColors.BodyText
});
baseLabelStyles.Selectors.Add(":focus .ms-Checkbox-text", new Style
{
Color = theme.SemanticColors.BodyText
});
}
var nameCheckboxStyle = new Style();
nameCheckboxStyle = "ms-Checkbox-checkbox";
var baseCheckboxStyles = new Style
{
Display = "flex",
FlexShrink = 0,
AlignItems = AlignItems.Center,
JustifyContent = JustifyContent.Center,
Height = MS_CHECKBOX_LABEL_SIZE,
Width = MS_CHECKBOX_LABEL_SIZE,
BorderRadius = theme.Effects.RoundedCorner2,
BorderWidth = "1px",
BorderStyle = "solid",
BorderColor = theme.Palette.NeutralPrimary,
BoxSizing = BoxSizing.BorderBox,
TransitionProperty = "background, border, border-color",
TransitionDuration = MS_CHECKBOX_TRANSITION_DURATION,
TransitionTimingFunction = MS_CHECKBOX_TRANSITION_TIMING,
Overflow = Overflow.Hidden
};
if (!this.Reversed)
{
baseCheckboxStyles.MarginRight = 4;
}
else
{
baseCheckboxStyles.MarginLeft = 4;
}
//if (!this.Disabled && (this.Checked.HasValue && this.Checked.Value))
if (!this.Disabled && this.isChecked)
{
baseCheckboxStyles.Background = theme.SemanticColors.InputBackgroundChecked;
baseCheckboxStyles.BorderColor = theme.SemanticColors.InputBackgroundChecked;
baseCheckboxStyles.Selectors.Add(CommonStyles.HighContrastSelector, new Style
{
Background = "Highlight",
BorderColor = "Highlight"
});
}
if (this.Disabled)
{
baseCheckboxStyles.BorderColor = theme.Palette.NeutralTertiaryAlt;
baseCheckboxStyles.Selectors.Add(CommonStyles.HighContrastSelector, new Style
{
BorderColor = "InactiveBorder"
});
}
//if (this.Disabled && (this.Checked.HasValue && this.Checked.Value))
if (this.Disabled && this.isChecked)
{
baseCheckboxStyles.Background = theme.Palette.NeutralTertiaryAlt;
baseCheckboxStyles.BorderColor = theme.Palette.NeutralTertiaryAlt;
}
var nameCheckmarkStyle = new Style();
nameCheckmarkStyle = "ms-Checkbox-checkmark";
var baseCheckmarkStyles = new Style
{
Opacity = this.isChecked ? 1 : 0,
Color = theme.SemanticColors.InputForegroundChecked
//Opacity = (this.Checked.HasValue && this.Checked.Value) ? 1 : 0,
//Color = (this.Checked.HasValue && this.Checked.Value && this.Disabled) ? theme.SemanticColors.DisabledBackground : theme.SemanticColors.InputForegroundChecked
};
baseCheckmarkStyles.Selectors.Add(CommonStyles.HighContrastSelector, new Style
{
Color = this.Disabled ? "InactiveBorder" : "Window",
MsHighContrastAdjust = "none"
});
var checkBoxStyles = new CheckboxStyles
{
Root = new Style(rootStyles.ToArray()),
Input = baseInputStyles,
Label = new Style(new[] { nameLabelStyle, fontLabelStyles, baseLabelStyles }),
Checkbox = new Style(new[] { nameCheckboxStyle, baseCheckboxStyles }),
Checkmark = new Style(new[] { nameCheckmarkStyle, baseCheckmarkStyles })
};
var mergedStyles = Blazor.Extensions.MergeStyles.StyleEngine.MergeStyleSets(checkBoxStyles, this.Styles);
this.MergedStyles = mergedStyles;
}
catch
{
}
}
//protected string extraClassNames = " ";
protected override void ApplyStyles()
{
//this.extraClassNames += this.ClassNames;
try
{
var theme = ThemingEngine.DefaultTheme.Value;
var labelStyles = new LabelStyles();
var rootNameStyle = new Style();
rootNameStyle = "ms-Label";
var rootFontStyle = theme.Fonts.Medium;
var rootBaseStyle = new Extensions.MergeStyles.Style()
{
//Font = theme.Fonts.Medium.Font,
//FontFamily = theme.Fonts.Medium.FontFamily,
//FontKerning = theme.Fonts.Medium.FontKerning,
//FontSize = theme.Fonts.Medium.FontSize,
//FontSizeAdjust = theme.Fonts.Medium.FontSizeAdjust,
//FontStretch = theme.Fonts.Medium.FontStretch,
//FontStyle = theme.Fonts.Medium.FontStyle,
//FontSynthesis = theme.Fonts.Medium.FontSynthesis,
//FontVariant = theme.Fonts.Medium.FontVariant,
FontVariantAlternates = theme.Fonts.Medium.FontVariantAlternates,
FontWeight = FontWeights.DefaultFontWeight.SemiBold,// theme.Fonts.FontWeight,
Color = theme.SemanticColors.BodyText,
BoxSizing = Extensions.MergeStyles.BoxSizing.BorderBox,
BoxShadow = "none",
Margin = 0,
Display = "block",
Padding = "5px 0px",
WordWrap = "break-word",
OverflowWrap = Extensions.MergeStyles.OverflowWrap.BreakWord
};
var extraClasses = new Style();
extraClasses = this.ClassNames;
var rootStyle = new Style(new[] { rootNameStyle, rootFontStyle, rootBaseStyle, extraClasses });
labelStyles.Root = rootStyle;
//style.Root..Add( new KeyValuePair<string, object>( "fakeStyle", "fakeyValue"));
//style.Root.Add(new KeyValuePair<string, object>("fake-style", ""));
if (this.Disabled)
{
rootBaseStyle.Color = theme.Palette.NeutralTertiary;//.DisabledBodyText;
rootBaseStyle.Selectors.Add(CommonStyles.HighContrastSelector, new Extensions.MergeStyles.Style()
{
Color = "GrayText"
});
}
if (this.Required)
{
rootBaseStyle.Selectors.Add("::after", new Extensions.MergeStyles.Style()
{
Content = "' *'",
Color = theme.SemanticColors.ErrorText,
PaddingRight = 12
});
}
var mergedStyles = Blazor.Extensions.MergeStyles.StyleEngine.MergeStyleSets(labelStyles, this.Styles);
this.MergedStyles = mergedStyles;
}
catch
{
}
}
