public static FocusStyleMergeRules GetFocusStyle(FocusStyleProps focusStyleProps, string selectorName) { var focusStyles = new FocusStyleMergeRules(); focusStyles.MergeRules = $"outline:transparent;" + $"position:{focusStyleProps.Position};"; //alternative property for newer extensions (needs string array without semicolons) focusStyles.MergeRulesList.Add("outline:transparent"); focusStyles.MergeRulesList.Add($"position:{focusStyleProps.Position}"); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $"{selectorName}::-moz-focus-inner" }, Properties = new CssString() { Css = $"border:0;" } }); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $".ms-Fabric--isFocusVisible {selectorName}{(focusStyleProps.IsFocusedOnly ? ":focus" : "")}::after" }, Properties = new CssString() { Css = $"content:'';" + $"position:absolute;" + $"left:{focusStyleProps.Inset + 1}px;" + $"top:{focusStyleProps.Inset + 1}px;" + $"bottom:{focusStyleProps.Inset + 1}px;" + $"right:{focusStyleProps.Inset + 1}px;" + $"border:{focusStyleProps.Width}px solid {focusStyleProps.BorderColor};" + $"outline:{focusStyleProps.Width}px solid {focusStyleProps.OutlineColor};" + $"z-index:{focusStyleProps.ZIndex};" } }); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $"@media screen and (-ms-high-contrast: active)" }, Properties = new CssString() { Css = $"{selectorName}{(focusStyleProps.IsFocusedOnly ? ":focus" : "")}:after" + "{" + focusStyleProps.HighContrastStyle + "}" } }); return(focusStyles); }
public static FocusStyleMergeRules GetInputFocusStyle(FocusStyleProps focusStyleProps, string selectorName, bool isBorderBottom = false, double borderPosition = -1) { var focusStyles = new FocusStyleMergeRules(); focusStyles.MergeRules = $"border-color:{focusStyleProps.BorderColor};"; //alternative property for newer extensions (needs string array without semicolons) focusStyles.MergeRulesList.Add($"border-color:{focusStyleProps.BorderColor};"); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $"{selectorName}::after" }, Properties = new CssString() { Css = $"pointer-events:none;" + $"content:'';" + $"position:absolute;" + $"left:{(isBorderBottom ? 0 : borderPosition)}px;" + $"top:{borderPosition}px;" + $"bottom:{borderPosition}px;" + $"right:{(isBorderBottom ? 0 : borderPosition)}px;" + (isBorderBottom ? $"border-bottom:2px solid {focusStyleProps.BorderColor};" : $"border:2px solid {focusStyleProps.BorderColor};") + $"border-radius:{focusStyleProps.BorderRadius};" + (isBorderBottom ? $"width:100%;" : "") } }); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $"@media screen and (-ms-high-contrast: active)" }, Properties = new CssString() { Css = $"{selectorName}:after" + "{" + (isBorderBottom ? $"border-bottom-color:Highlight" : "border-color:Highlight") + "}" } }); return(focusStyles); }
public static FocusStyleMergeRules GetFocusOutlineStyle(FocusStyleProps focusStyleProps, string selectorName) { var focusStyles = new FocusStyleMergeRules(); focusStyles.AddRules.Add(new Rule() { Selector = new CssStringSelector() { SelectorName = $".ms-Fabric--isFocusVisible {selectorName}::after" }, Properties = new CssString() { Css = $"outline:{focusStyleProps.Width}px solid {focusStyleProps.OutlineColor};" + $"outline-offset:-{focusStyleProps.Inset}px;" } }); return(focusStyles); }