public static FocusStyleMergeRules GetFocusStyle(FocusStyleProps focusStyleProps, string selectorName)
{
FocusStyleMergeRules?focusStyles = new();
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 GetFocusStyle(FocusStyleProps focusStyleProps, string selectorName)
{
var focusStyles = new FocusStyleMergeRules();
focusStyles.MergeRules = $"outline:transparent;" +
$"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:var(--zindex-FocusStyle);"
}
});
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)
{
FocusStyleMergeRules?focusStyles = new();
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)
{
FocusStyleMergeRules?focusStyles = new();
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);
}
private ICollection <IRule> CreateGlobalCss()
{
var menuRules = new HashSet <IRule>();
// ROOT
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu"
},
Properties = new CssString()
{
Css = $"font-size:{Theme.FontStyle.FontSize.Medium};" +
$"font-weight:{Theme.FontStyle.FontWeight.Regular};" +
$"background-color:{Theme.SemanticColors.MenuBackground};" +
$"min-width:180px;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-container:focus"
},
Properties = new CssString()
{
Css = $"outline:0;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-list"
},
Properties = new CssString()
{
Css = $"list-style-type:none;" +
$"margin:0;" +
$"padding:0;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-header"
},
Properties = new CssString()
{
Css = $"font-size:{Theme.FontStyle.FontSize.Small};" +
$"font-weight:{Theme.FontStyle.FontWeight.SemiBold};" +
$"color:{Theme.SemanticColors.MenuHeader};" +
$"background:none;" +
$"background-color:transparent;" +
$"border:none;" +
$"height:36px;" +
$"line-height:36px;" +
$"cursor:default;" +
$"padding:0 6px;" +
$"user-select:none;" +
$"text-align:left;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-title"
},
Properties = new CssString()
{
Css = $"font-size:{Theme.FontStyle.FontSize.MediumPlus};" +
$"padding-right:14px;" +
$"padding-left:14px;" +
$"padding-bottom:5px;" +
$"padding-top:5px;" +
$"background-color:{Theme.SemanticColors.MenuItemBackgroundPressed};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu .ms-Callout"
},
Properties = new CssString()
{
Css = $"box-shadow:{Theme.Effects.Elevation8};"
}
});
var focusProps = new Style.FocusStyleProps(Theme);
var focusStyles = BlazorFluentUI.Style.FocusStyle.GetFocusStyle(focusProps, ".ms-ContextualMenu-item");
foreach (var rule in focusStyles.AddRules)
{
menuRules.Add(rule);
}
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-item"
},
Properties = new CssString()
{
Css = focusStyles.MergeRules +
$"color:{Theme.SemanticTextColors.BodyText};" +
$"position:relative;" +
$"box-sizing:border-box;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-divider"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"height:1px;" +
$"background-color:{Theme.SemanticColors.BodyDivider};" +
$"position:relative;"
}
});
var linkFocusStyles = BlazorFluentUI.Style.FocusStyle.GetFocusStyle(focusProps, ".ms-ContextualMenu-link");
foreach (var rule in linkFocusStyles.AddRules)
{
menuRules.Add(rule);
}
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link"
},
Properties = new CssString()
{
Css = linkFocusStyles.MergeRules +
$"color:{Theme.SemanticTextColors.BodyText};" +
$"background-color:transparent;" +
$"border:none;" +
$"width:100%;" +
$"height:36px;" +
$"line-height:36px;" +
$"display:block;" +
$"cursor:pointer;" +
$"padding:0 8px 0 4px;" +
$"text-align:left;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-item.is-disabled .ms-ContextualMenu-link"
},
Properties = new CssString()
{
Css = $"color:{Theme.SemanticTextColors.DisabledBodyText};" +
$"cursor:default;" +
$"pointer-events:none;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:focus"
},
Properties = new CssString()
{
Css = $"outline:0;"// +
//$"background-color:{Theme.Palette.White};" //!!!!! This won't work with dark mode, doesn't seem to be needed for light mode.
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:hover"
},
Properties = new CssString()
{
Css = $"color:{Theme.SemanticTextColors.MenuItemTextHovered};" +
$"background-color:{Theme.SemanticColors.MenuItemBackgroundHovered};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:hover .ms-ContextualMenu-icon"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.ThemeDarkAlt};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:hover .ms-ContextualMenu-submenuIcon"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralPrimary};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-item.is-checked .ms-ContextualMenu-checkmarkIcon"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralPrimary};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:active"
},
Properties = new CssString()
{
Css = $"background-color:{Theme.SemanticColors.MenuItemBackgroundPressed};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:active .ms-ContextualMenu-icon"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.ThemeDark};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-link:active .ms-ContextualMenu-submenuIcon"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralPrimary};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-item.is-expanded .ms-ContextualMenu-link"
},
Properties = new CssString()
{
Css = $"background-color:{Theme.SemanticColors.MenuItemBackgroundPressed};" +
$"color:{Theme.SemanticTextColors.BodyTextChecked};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-linkContent"
},
Properties = new CssString()
{
Css = $"white-space:nowrap;" +
$"height:inherit;" +
$"display:flex;" +
$"align-items:center;" +
$"max-width:100%;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-anchorLink"
},
Properties = new CssString()
{
Css = $"padding:0 8px 0 4px;" +
$"text-rendering:auto;" +
$"color:inherit;" +
$"letter-spacing:normal;" +
$"word-spacing:normal;" +
$"text-transform:none;" +
$"text-indent:0px;" +
$"text-shadow:none;" +
$"text-decoration:none;" +
$"box-sizing:border-box;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-itemText"
},
Properties = new CssString()
{
Css = $"margin:0 4px;" +
$"vertical-align:middle;" +
$"display:inline-block;" +
$"flex-grow:1;" +
$"text-overflow:ellipsis;" +
$"overflow:hidden;" +
$"white-space:nowrap;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-secondaryText"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralSecondary};" +
$"padding-left:20px;" +
$"text-align:right;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-icon"
},
Properties = new CssString()
{
Css = $"display:inline-block;" +
$"min-height:1px;" +
$"max-height:36px;" +
$"font-size:{Theme.FontStyle.IconFontSize.Medium};" +
$"width:{Theme.FontStyle.IconFontSize.Medium};" +
$"margin:0 4px;" +
$"vertical-align:middle;" +
$"flex-shrink:0;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = $"@media only screen and (min-width: ${0}px) and (max-width: ${Theme.CommonStyle.ScreenWidthMaxMedium}px)"
},
Properties = new CssString()
{
Css = ".ms-ContextualMenu-icon {" +
$"font-size:{Theme.FontStyle.IconFontSize.Large};" +
$"width:{Theme.FontStyle.IconFontSize.Large};" +
"}"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-iconColor"
},
Properties = new CssString()
{
Css = $"color:{Theme.SemanticColors.MenuIcon};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu.is-disabled .ms-ContextualMenu-iconColor"
},
Properties = new CssString()
{
Css = $"color:{Theme.SemanticTextColors.DisabledBodyText};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-checkmarkIcon"
},
Properties = new CssString()
{
Css = $"color:{Theme.SemanticTextColors.BodySubtext};" +
$"margin: 0 4px;"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-submenuIcon"
},
Properties = new CssString()
{
Css = $"height:36px;" +
$"line-height:36px;" +
$"color:{Theme.Palette.NeutralSecondary};" +
$"text-align:center;" +
$"display:inline-block;" +
$"vertical-align:middle;" +
$"flex-shrink:0;" +
$"font-size:{Theme.FontStyle.IconFontSize.Small};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-submenuIcon:hover"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralPrimary};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-submenuIcon:active"
},
Properties = new CssString()
{
Css = $"color:{Theme.Palette.NeutralPrimary};"
}
});
menuRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-ContextualMenu-splitButtonFlexContainer"
},
Properties = new CssString()
{
Css = $"display:flex;" +
$"height:36px;" +
$"flex-wrap:nowrap;" +
$"justify-content:center;" +
$"align-items:flex-start;"
}
});
return(menuRules);
}
public ICollection <Rule> CreateGlobalCss(ITheme theme)
{
var navRules = new HashSet <Rule>();
// ROOT
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav"
},
Properties = new CssString()
{
Css = $"overflow-y:auto;" +
$"user-select:none;" +
$"-webkit-overflow-scrolling:touch;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav.is-on-top"
},
Properties = new CssString()
{
Css = $"position:absolute;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-linkText"
},
Properties = new CssString()
{
Css = $"margin:0px 4px;" +
$"overflow:hidden;" +
$"vertical-align:middle;" +
$"text-align:left;" +
$"text-overflow:ellipsis;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"position:relative;" +
$"color:{theme.SemanticTextColors.BodyText};" +
$"background-color:{theme.SemanticColors.BodyBackground};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-disabled"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.DisabledText};"
}
});
var focusProps = new Style.FocusStyleProps(theme);
var focusStyles = BlazorFluentUI.Style.FocusStyle.GetFocusStyle(focusProps, ".ms-Nav .ms-Nav-compositeLink .ms-Nav-link");
foreach (var rule in focusStyles.AddRules)
{
navRules.Add(rule);
}
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav .ms-Nav-compositeLink .ms-Nav-link"
},
Properties = new CssString()
{
Css = focusStyles.MergeRules +
$"display:block;" +
$"position:relative;" +
$"height:44px;" +
$"width:100%;" +
$"line-height:44px;" +
$"text-decoration:none;" +
$"cursor:pointer;" +
$"text-overflow:ellipsis;" +
$"white-space:nowrap;" +
$"overflow:hidden;" +
$"padding-left:20px;" +
$"padding-right:20px;" +
$"color:{theme.SemanticTextColors.BodyText};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-Nav-link {border-color:transparent;}" +
".ms-Nav-link:focus {border-color:WindowText;}"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink:hover:not(.is-disabled) .ms-Nav-link"
},
Properties = new CssString()
{
Css = $"background-color:{theme.SemanticColors.BodyBackgroundHovered};" +
$"color:{theme.SemanticTextColors.BodyText};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-selected .ms-Nav-link"
},
Properties = new CssString()
{
Css = $"background-color:{theme.SemanticColors.BodyBackgroundChecked};" +
$"font-weight:{theme.FontStyle.FontWeight.SemiBold};" +
$"color:{theme.SemanticTextColors.BodyTextChecked};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-selected .ms-Nav-link::after"
},
Properties = new CssString()
{
Css = $"border-left:2px solid {theme.Palette.ThemePrimary};" +
$"content:'';" +
$"position:absolute;" +
$"top:0;" +
$"bottom:0;" +
$"left:0;" +
$"right:0;" +
$"pointer-events:none;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-disabled .ms-Nav-link"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.DisabledText};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-button .ms-Nav-link"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.ThemePrimary};"
}
});
//var focusProps = new Style.FocusStyleProps(theme);
var chevronButtonFocusStyles = BlazorFluentUI.Style.FocusStyle.GetFocusStyle(focusProps, ".ms-Nav-chevronButton");
foreach (var rule in chevronButtonFocusStyles.AddRules)
{
navRules.Add(rule);
}
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-chevronButton"
},
Properties = new CssString()
{
Css = chevronButtonFocusStyles.MergeRules +
$"display:block;" +
$"text-align:left;" +
$"line-height:44px;" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};" +
$"font-size:{theme.FontStyle.FontSize.Small};" +
$"margin:5px 0px;" +
$"padding:0px 20px 0px 28px;" +
$"border:none;" +
$"text-overflow:ellipsis;" +
$"white-space:nowrap;" +
$"overflow:hidden;" +
$"cursor:pointer;" +
$"color:{theme.SemanticTextColors.BodyText};" +
$"background-color:transparent;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-chevronButton:visited"
},
Properties = new CssString()
{
Css = "color:inherit;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-chevronButton:hover"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.BodyText};" +
$"background-color:{theme.SemanticColors.BodyBackgroundHovered};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink:hover .ms-Nav-chevronButton"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.BodyText};" +
$"background-color:{theme.SemanticColors.BodyBackgroundHovered};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-chevronButton.is-group"
},
Properties = new CssString()
{
Css = $"width:100%;" +
$"height:44px;" +
$"border-bottom:1px solid {theme.SemanticColors.BodyDivider};"
}
});
navRules.Add(new Rule()
{
/* i.e. is a link */
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink:not(.is-button) .ms-Nav-chevronButton"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"width:26px;" +
$"height:42px;" +
$"position:absolute;" +
$"top:1px;" +
//$"left:1px;" +
$"z-index:{theme.ZIndex.Nav};" +
$"padding:0;" +
$"margin:0;"
}
});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav-compositeLink:not(.is-button).depth-one .ms-Nav-chevronButton" },
// Properties = new CssString()
// {
// Css = $"left:15px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav-compositeLink:not(.is-button).depth-two .ms-Nav-chevronButton" },
// Properties = new CssString()
// {
// Css = $"left:29px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav-compositeLink:not(.is-button).depth-three .ms-Nav-chevronButton" },
// Properties = new CssString()
// {
// Css = $"left:43px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav-compositeLink:not(.is-button).depth-four .ms-Nav-chevronButton" },
// Properties = new CssString()
// {
// Css = $"left:57px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:27px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-one .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:41px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-two .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:55px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-three .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:79px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-four .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:83px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-five .ms-Nav-link" },
// Properties = new CssString()
// {
// Css = $"padding-left:101px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:3px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-one .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:17px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-two .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:31px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-three .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:45px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-four .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:59px;"
// }
//});
//navRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-Nav .ms-Nav-compositeLink.depth-five .ms-Nav-link.has-icon" },
// Properties = new CssString()
// {
// Css = $"padding-left:73px;"
// }
//});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.ThemePrimary};" +
$"background-color:{theme.Palette.NeutralLighterAlt};"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton::after"
},
Properties = new CssString()
{
Css = $"border-left:2px solid {theme.Palette.ThemePrimary};" +
$"content:'';" +
$"position:absolute;" +
$"top:0;" +
$"right:0;" +
$"bottom:0;" +
$"left:0;" +
$"pointer-events:none;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-chevron"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"left:8px;" +
$"height:36px;" +
$"line-height:36px;" +
$"font-size:{theme.FontStyle.FontSize.Small};" +
$"transition:transform .1s linear;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink.is-expanded > * > .ms-Nav-chevron"
},
Properties = new CssString()
{
Css = $"transform:rotate(-180deg);"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-compositeLink:not(.is-button) > * > .ms-Nav-chevron"
},
Properties = new CssString()
{
Css = $"top:0;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-group.is-expanded > * > .ms-Nav-chevron"
},
Properties = new CssString()
{
Css = $"transform:rotate(-180deg);"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-group:not(.is-button) > * > .ms-Nav-chevron"
},
Properties = new CssString()
{
Css = $"top:0;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-navItem"
},
Properties = new CssString()
{
Css = $"padding:0;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-navItems"
},
Properties = new CssString()
{
Css = $"padding:0;" +
$"list-style-type:none;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-group"
},
Properties = new CssString()
{
Css = $"position:relative;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-groupContent"
},
Properties = new CssString()
{
Css = $"display:none;" +
$"margin-bottom:40px;"
}
});
navRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Nav-group.is-expanded .ms-Nav-groupContent"
},
Properties = new CssString()
{
Css = $"display:block;"
}
});
return(navRules);
}
