private List <Rule> GetDefaultCellStyles(string selector, ITheme theme)
{
var rules = new List <Rule>();
// Cell
var cellfocusStyleProps = new FocusStyleProps(theme);
cellfocusStyleProps.Inset = -1;
cellfocusStyleProps.BorderColor = theme.Palette.NeutralSecondary;
cellfocusStyleProps.OutlineColor = theme.Palette.White;
var cellMergeStyleResults = FocusStyle.GetFocusStyle(cellfocusStyleProps, $".ms-DetailsRow {selector}");
rules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = $".ms-DetailsRow {selector}"
},
Properties = new CssString()
{
Css = cellMergeStyleResults.MergeRules +
$"display:inline-block;" +
$"position:relative;" +
$"box-sizing:border-box;" +
$"min-height:{RowHeight}px;" +
$"vertical-align:top;" +
$"white-space:nowrap;" +
$"overflow:hidden;" +
$"text-overflow:ellipsis;" +
$"padding-top:{RowVerticalPadding}px;" +
$"padding-bottom:{RowVerticalPadding}px;" +
$"padding-left:{CellLeftPadding}px;"
}
});
rules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = $".ms-DetailsRow {selector} > button"
},
Properties = new CssString()
{
Css = "max-width:100%;"
}
});
rules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".ms-DetailsRow.is-selected {selector} {{" +
$"background:Highlight;" +
$"color:HighlightText;" +
$"-ms-high-contrast-adjust:none;" +
"}" +
$".ms-DetailsRow.is-selected {selector} > a {{" +
$"color:HighlightText;" +
"}"
}
});
rules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = $".ms-DetailsRow.is-compact {selector}"
},
Properties = new CssString()
{
Css = cellMergeStyleResults.MergeRules +
$"min-height:{CompactRowHeight}px;" +
$"padding-top:{CompactRowVerticalPadding}px;" +
$"padding-bottom:{CompactRowVerticalPadding}px;" +
$"padding-left:{CellLeftPadding}px;"
}
});
return(rules);
}
protected ICollection <IRule> CreateBaseGlobalCss(ITheme theme)
{
var buttonRules = new HashSet <IRule>();
var props = new FocusStyleProps(theme);
props.Inset = 1;
props.BorderColor = "transparent";
props.HighContrastStyle = "left:-2px;top:-2px;bottom:-2px;right:-2px;border:none;outline-color:ButtonText;";
var rootFocusStyles = FocusStyle.GetFocusStyle(props, ".ms-Button");
foreach (var rule in rootFocusStyles.AddRules)
{
buttonRules.Add(rule);
}
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button"
},
Properties = new CssString()
{
Css = rootFocusStyles.MergeRules +
$"font-size:{theme.FontStyle.FontSize.Medium};" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};" +
$"box-sizing:border-box;" +
$"border: 1px solid {theme.SemanticColors.ButtonBorder};" +
$"user-select:none;" +
$"display:inline-block;" +
$"text-decoration:none;" +
$"text-align:center;" +
$"cursor:pointer;" +
$"vertical-align:top;" +
$"padding:0 16px;" +
$"min-width:80px;" +
$"height:32px;" +
$"border-radius:{theme.Effects.RoundedCorner2};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button:active > *"
},
Properties = new CssString()
{
Css = $"position:relative;" +
$"left:0;" +
$"top:0;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-disabled"
},
Properties = new CssString()
{
Css = $"background-color:{theme.SemanticColors.DisabledBackground};" +
$"color:{theme.SemanticTextColors.DisabledText};" +
$"cursor:default;" +
$"pointer-events:none;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button:hover, .ms-Button:focus"
},
Properties = new CssString()
{
Css = $"text-decoration:none;" +
$"outline:0;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button:link, .ms-Button:visited, .ms-Button:active"
},
Properties = new CssString()
{
Css = $"text-decoration:none;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-Button{color: GrayText; border-color:GrayText;}"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-expanded"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralLight};" +
$"color:{theme.Palette.NeutralDark};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.ms-Button--primary.is-expanded"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.ThemeDark};" +
$"color:{theme.Palette.White};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-expanded .ms-Button-icon"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.ThemeDark};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.ms-Button--primary.is-expanded .ms-Button-icon"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.White};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-expanded .ms-Button-menuIcon"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralPrimary};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.ms-Button--primary.is-expanded .ms-Button-menuIcon"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.White};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-expanded:hover"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralQuaternaryAlt};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.ms-Button--primary.is-expanded:hover"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.ThemeDark};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-disabled .ms-Button-icon"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.DisabledText};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button.is-disabled .ms-Button-menuIcon"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.DisabledText};"
}
});
//FlexContainer
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-flexContainer"
},
Properties = new CssString()
{
Css = $"display:flex;" +
$"height:100%;" +
$"flex-wrap:nowrap;" +
$"justify-content:center;" +
$"align-items:center;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-textContainer"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"flex-grow:1;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-description"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"font-size:{theme.FontStyle.FontSize.Small};" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};"
}
});
//Icon
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-icon"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.MediumPlus};" + //originally FontSize.Icon
$"margin:0px 4px;" +
$"height:16px;" +
$"line-height:16px;" +
$"text-align:center;" +
$"vertical-align:middle;" +
$"flex-shrink:0;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-menuIcon, .ms-Button-menuIcon .ms-Button-icon"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.Small};" +
$"margin:0px 4px;" +
$"height:16px;" +
$"line-height:16px;" +
$"text-align:center;" +
$"vertical-align:middle;" +
$"flex-shrink:0;"
}
});
//Label
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-label"
},
Properties = new CssString()
{
Css = $"font-weight:{theme.FontStyle.FontWeight.SemiBold};" +
$"margin:0px 4px;" +
$"line-height:100%;" +
$"display:block;"
}
});
//ScreenReaderText
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-screenReaderText"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"width:1px;" +
$"height:1px;" +
$"margin:-1px;" +
$"padding:0px;" +
$"border:0px;" +
$"overflow:hidden;"
}
});
//Split stuff
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-splitContainer"
},
Properties = new CssString()
{
Css = $"display:inline-flex;" +
$"position:relative;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-splitContainer .ms-Button--default:not(.ms-Button-menuIcon)"
},
Properties = new CssString()
{
Css = $"border-top-right-radius:0;" +
$"border-bottom-right-radius:0;" +
$"border-right:none;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-splitContainer .ms-Button--primary:not(.ms-Button-menuIcon)"
},
Properties = new CssString()
{
Css = $"border-top-right-radius:0;" +
$"border-bottom-right-radius:0;" +
$"border-right:none;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-splitContainer .ms-Button-menuIcon"
},
Properties = new CssString()
{
Css = $"padding:6px;" +
$"height:auto;" +
$"box-sizing:border-box;" +
$"border-radius:0;" +
$"border-top-right-radius:{theme.Effects.RoundedCorner2};" +
$"border-bottom-right-radius:{theme.Effects.RoundedCorner2};" +
$"border-left:none;" +
$"outline:transparent;" +
$"user-select:none;" +
$"display:inline-block;" +
$"text-decoration:none;" +
$"text-align:center;" +
$"cursor:pointer;" +
$"vertical-align:top;" +
$"min-width:32px;" +
$"width:32px;" +
$"margin-left:-1px;" +
$"margin-top:0px;" +
$"margin-right:0px;" +
$"margin-bottom:0px;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-divider"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"width:1px;" +
$"right:31px;" +
$"top:8px;" +
$"bottom:8px;"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button--primary.ms-Button-divider"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.White};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button--default.ms-Button-divider"
},
Properties = new CssString()
{
Css = $"background-color:{theme.SemanticColors.BodyDivider};"
}
});
buttonRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Button-divider.disabled"
},
Properties = new CssString()
{
Css = $"background-color:{theme.SemanticColors.BodyDivider};"
}
});
return(buttonRules);
}
public ICollection <Rule> CreateGlobalCss(ITheme theme)
{
//DetailsRowLocalRules.Clear();
var detailsRowRules = new HashSet <Rule>();
// Root
var rootFocusStyleProps = new FocusStyleProps(theme);
rootFocusStyleProps.BorderColor = theme.SemanticColors.FocusBorder;
rootFocusStyleProps.OutlineColor = theme.Palette.White;
var rootMergeStyleResults = FocusStyle.GetFocusStyle(rootFocusStyleProps, ".ms-DetailsRow");
foreach (var rule in rootMergeStyleResults.AddRules)
{
detailsRowRules.Add(rule);
}
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.Small};" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};" +
rootMergeStyleResults.MergeRules +
$"border-bottom:1px solid {theme.Palette.NeutralLighter};" +
$"background:{theme.Palette.White};" +
$"color:{theme.Palette.NeutralSecondary};" +
$"display:inline-flex;" +
$"min-width:100%;" +
$"width:100%;" + // added to make DetailsRow fit width of window
$"min-height:{RowHeight}px;" +
$"white-space:nowrap;" +
$"padding:0px;" +
$"box-sizing:border-box;" +
$"vertical-align:top;" +
$"text-align:left;"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-compact"
},
Properties = new CssString()
{
Css = $"min-height:{CompactRowHeight}px;" +
"border:0px"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow:hover"
},
Properties = new CssString()
{
Css = $"background:{theme.Palette.NeutralLighter};" +
$"color:{theme.Palette.NeutralPrimary}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow:hover .is-row-header"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralDark}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow:hover .ms-DetailsRow-check"
},
Properties = new CssString()
{
Css = $"opacity:1;"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Fabric--isFocusVisible .ms-DetailsRow:focus .ms-DetailsRow-check"
},
Properties = new CssString()
{
Css = $"opacity:1;"
}
});
var rootSelectedFocusStyleProps = new FocusStyleProps(theme);
rootSelectedFocusStyleProps.BorderColor = theme.SemanticColors.FocusBorder;
rootSelectedFocusStyleProps.OutlineColor = theme.Palette.White;
var rootSelectedMergeStyleResults = FocusStyle.GetFocusStyle(rootSelectedFocusStyleProps, ".ms-DetailsRow.is-selected");
foreach (var rule in rootSelectedMergeStyleResults.AddRules)
{
detailsRowRules.Add(rule);
}
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-selected"
},
Properties = new CssString()
{
Css = rootSelectedMergeStyleResults.MergeRules +
$"color:{theme.Palette.NeutralDark};" +
$"background:{theme.Palette.NeutralLight};" +
$"border-bottom:1px solid {theme.Palette.White};"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-selected:before"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"display:block;" +
$"top:-1px;" +
$"height:1px;" +
$"bottom:0px;" +
$"left:0px;" +
$"right:0px;" +
$"content:'';" +
$"border-top:1px solid {theme.Palette.White}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-selected:hover"
},
Properties = new CssString()
{
Css = $"background:{theme.Palette.NeutralQuaternaryAlt};" +
$"color:{theme.Palette.NeutralPrimary};"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-selected:hover .ms-DetailsRow-cell {" +
$"color:HighlightText;" +
"}" +
".ms-DetailsRow.is-selected:hover .ms-DetailsRow-cell > a {" +
$"color:HighlightText;" +
"}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-selected.is-row-header:hover"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralDark};"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-selected.is-row-header:hover {" +
$"color:HighlightText;" +
"}" +
".ms-DetailsRow.is-selected:hover {" +
$"background:Highlight;" +
"}"
}
});
// #####################################################################################
// selected NOT FINISHED!
// #####################################################################################
// CellUnpadded
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-cellUnpadded"
},
Properties = new CssString()
{
Css = $"padding-right:{CellRightPadding}px;"
}
});
// CellPadded
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-cellPadded"
},
Properties = new CssString()
{
Css = $"padding-right:{CellExtraRightPadding + CellRightPadding}px;"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-cellPadded.ms-DetailsRow-cellCheck"
},
Properties = new CssString()
{
Css = $"padding-right:0px;"
}
});
//Cell
var rules = GetDefaultCellStyles(".ms-DetailsRow-cell", theme);
foreach (var rule in rules)
{
detailsRowRules.Add(rule);
}
// CellMeasurer
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-cellMeasurer"
},
Properties = new CssString()
{
Css = $"overflow:visible;" +
$"white-space:nowrap;"
}
});
// CheckCell
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-checkCell"
},
Properties = new CssString()
{
Css = $"padding:0px;" +
$"padding-top:1px;" +
$"margin-top:-1px;" +
$"flex-shrink:0;"
}
});
// CheckCover
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-checkCover"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"top:-1px;" +
$"left:0px;" +
$"bottom:0px;" +
$"right:0px;"
}
});
//Fields
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-fields"
},
Properties = new CssString()
{
Css = $"display:flex;" +
$"align-items:stretch;" +
$"overflow-x:hidden;"
}
});
//IsRowHeader
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-row-header"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralPrimary};" +
$"font-size:{theme.FontStyle.FontSize.Medium};"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-row-header.is-selected"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralDark};" +
$"font-weight:{theme.FontStyle.FontWeight.SemiBold};"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-row-header.is-selected {" +
$"color:HighlightText;" +
"}"
}
});
// IsMultiline
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-multiline"
},
Properties = new CssString()
{
Css = $"white-space:normal;" +
$"word-break:break-word;" +
$"text-overflow:clip;"
}
});
//DetailsRowGlobalRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-DetailsRow-cell[data-is-focusable='true']" },
// Properties = new CssString()
// {
// Css = "max-width:100%;"
// }
//});
var selectedfocusStyleProps = new FocusStyleProps(theme);
selectedfocusStyleProps.Inset = -1;
selectedfocusStyleProps.BorderColor = theme.SemanticColors.FocusBorder;
selectedfocusStyleProps.OutlineColor = theme.Palette.White;
var selectedMergeStyleResults = FocusStyle.GetFocusStyle(selectedfocusStyleProps, ".ms-List-cell.is-selected .ms-DetailsRow");
return(detailsRowRules);
}
public ICollection <IRule> CreateGlobalCss(ITheme theme)
{
var groupHeaderRules = new HashSet <IRule>();
// Root
var rootFocusStyleProps = new FocusStyleProps(theme);
var rootMergeStyleResults = FocusStyle.GetFocusStyle(rootFocusStyleProps, ".ms-GroupHeader");
foreach (var rule in rootMergeStyleResults.AddRules)
{
groupHeaderRules.Add(rule);
}
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader"
},
Properties = new CssString()
{
Css = rootMergeStyleResults.MergeRules +
$"border-bottom:1px solid {theme.SemanticColors.ListBackground};" + // keep the border for height but color it so it's invisible.
$"cursor:default;" +
$"user-select:none;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader:hover"
},
Properties = new CssString()
{
Css = $"background:{theme.SemanticColors.ListItemBackgroundHovered};" +
$"color:{theme.SemanticTextColors.ActionLinkHovered};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader:hover .ms-GroupHeader-check"
},
Properties = new CssString()
{
Css = $"opacity:1;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Fabric--isFocusVisible .ms-GroupHeader:focus .ms-GroupHeader-check"
},
Properties = new CssString()
{
Css = $"opacity:1;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupedList-group.is-dropping > .ms-GroupHeader .ms-GroupHeader-dropIcon"
},
Properties = new CssString()
{
Css = $"transition:transform var(--animation-DURATION_4) cubic-bezier(0.075, 0.820, 0.165, 1.000), opacity var(--animation-DURATION_1) cubic-bezier(0.390, 0.575, 0.565, 1.000);" +
$"transition-delay:var(--animation-DURATION_3);" +
$"opacity: 1;" +
$"transform:rotate(0.2deg) scale(1);" // rotation prevents jittery motion in IE
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupedList-group.is-dropping > .ms-GroupHeader-check"
},
Properties = new CssString()
{
Css = $"opacity: 0;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-selected"
},
Properties = new CssString()
{
Css = $"background:{theme.SemanticColors.ListItemBackgroundChecked};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-selected:hover"
},
Properties = new CssString()
{
Css = $"background:{theme.SemanticColors.ListItemBackgroundCheckedHovered};"
}
});
//groupHeaderRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-GroupHeader.is-selected .ms-GroupHeader-check" },
// Properties = new CssString()
// {
// Css = $"opacity:1;"
// }
//});
//GroupHeaderContainer
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-groupHeaderContainer"
},
Properties = new CssString()
{
Css = $"display:flex;" +
$"align-items:center;" +
$"height:48px;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader--compact .ms-GroupHeader-groupHeaderContainer"
},
Properties = new CssString()
{
Css = $"height:40px;"
}
});
//HeaderCount
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-headerCount"
},
Properties = new CssString()
{
Css = $"padding:0px 4px;"
}
});
//Check
var checkMergeStyleResults = FocusStyle.GetFocusStyle(rootFocusStyleProps, ".ms-GroupHeader-check");
foreach (var rule in checkMergeStyleResults.AddRules)
{
groupHeaderRules.Add(rule);
}
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-check"
},
Properties = new CssString()
{
Css = checkMergeStyleResults.MergeRules +
$"cursor:default;" +
$"background:none;" +
$"background-color:transparent;" +
$"border:none;" +
$"padding:0;" +
$"display:flex;" +
$"align-items:center;" +
$"justify-content:center;" +
$"padding-top:1px;" +
$"margin-top:-1px;" +
$"opacity:0;" +
$"width:48px;" +
$"height:48px;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-Fabric--isFocusVisible .ms-GroupHeader-check:focus"
},
Properties = new CssString()
{
Css = $"opacity:1;"
}
});
//Expand
var expandMergeStyleResults = FocusStyle.GetFocusStyle(rootFocusStyleProps, ".ms-GroupHeader-expand");
foreach (var rule in expandMergeStyleResults.AddRules)
{
groupHeaderRules.Add(rule);
}
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-expand"
},
Properties = new CssString()
{
Css = checkMergeStyleResults.MergeRules +
$"cursor:default;" +
$"background:none;" +
$"background-color:transparent;" +
$"border:none;" +
$"padding:0;" +
$"display:flex;" +
$"align-items:center;" +
$"justify-content:center;" +
$"font-size:{theme.FontStyle.FontSize.Small};" +
$"width:48px;" +
$"height:48px;" +
$"color:{theme.Palette.NeutralSecondary};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader--compact .ms-GroupHeader-expand"
},
Properties = new CssString()
{
Css = $"height:40px;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-selected .ms-GroupHeader-expand"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralPrimary};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-expand:hover"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralLight};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-selected .ms-GroupHeader-expand:hover"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralQuaternary};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-expand:active"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralQuaternaryAlt};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-selected .ms-GroupHeader-expand:active"
},
Properties = new CssString()
{
Css = $"background-color:{theme.Palette.NeutralTertiaryAlt};"
}
});
//ExpandIsCollapsed
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-expandIsCollapsed"
},
Properties = new CssString()
{
Css = $"transform:rotate(90deg);" +
$"transform-origin:50% 50%;" +
$"transition:transform .1s linear;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-collapsed .ms-GroupHeader-expandIsCollapsed"
},
Properties = new CssString()
{
Css = $"transform:rotate(0deg);"
}
});
//Title
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-title"
},
Properties = new CssString()
{
Css = $"padding-left:12px;" +
$"font-size:{theme.FontStyle.FontSize.MediumPlus};" +
$"font-weight:{theme.FontStyle.FontWeight.SemiBold};" +
$"cursor:pointer;" +
$"outline:0;" +
$"white-space:nowrap;" +
$"text-overflow:ellipsis;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader--compact .ms-GroupHeader-title"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.Medium};"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader.is-collapsed .ms-GroupHeader-title"
},
Properties = new CssString()
{
Css = $"font-weight:{theme.FontStyle.FontWeight.Regular};"
}
});
//DropIcon
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-dropIcon"
},
Properties = new CssString()
{
Css = $"position:absolute;" +
$"left:-26px;" +
$"font-size:20px;" + //used IconFontSize theme style which we haven't implemented yet.
$"color:{theme.Palette.NeutralSecondary};" +
$"transition:transform var(--animation-DURATION_2) cubic-bezier(0.600, -0.280, 0.735, 0.045), opacity var(--animation-DURATION_4) cubic-bezier(0.390, 0.575, 0.565, 1.000);" +
$"opacity:0;" +
$"transform:rotate(0.2deg) scale(0.65);" +
$"transform-origin:10px 10px;"
}
});
groupHeaderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-GroupHeader-dropIcon .ms-Icon--Tag"
},
Properties = new CssString()
{
Css = $"position:absolute;"
}
});
return(groupHeaderRules);
}
public ICollection <Rule> CreateGlobalCss(ITheme theme)
{
var detailsRowRules = new HashSet <Rule>();
var focusProps = new FocusStyleProps(theme);
var focusStyles = FocusStyle.GetFocusStyle(focusProps, ".ms-DetailsRow-check");
detailsRowRules.Add(
new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-check"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.Small};" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};" +
focusStyles.MergeRules +
$"display:flex;" +
$"align-items:center;" +
$"justify-content:center;" +
$"cursor:default;" +
$"box-sizing:border-box;" +
$"vertical-align:top;" +
$"background:none;" +
$"background-color:transparent;" +
$"border:none;" +
$"opacity:0;" +
$"height:42px;" +
$"width:48px;" +
$"padding:0px;" +
$"margin:0px;"
}
});
detailsRowRules.Add(
new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-compact .ms-DetailsRow-check"
},
Properties = new CssString()
{
Css = "height:32px;"
}
});
detailsRowRules.Add(
new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-header .ms-DetailsRow-check"
},
Properties = new CssString()
{
Css = "height:42px;"
}
});
detailsRowRules.Add(
new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow-check.is-checked,.ms-DetailsRow-check.is-visible"
},
Properties = new CssString()
{
Css = "opacity:1;"
}
});
return(detailsRowRules);
}
public ICollection <IRule> CreateGlobalCss(ITheme theme)
{
var pressedActiveSectionColor = theme.SemanticColors.InputBackgroundCheckedHovered;
var hoveredActiveSectionColor = theme.SemanticColors.InputBackgroundChecked;
var hoveredPressedinactiveSectionColor = theme.SemanticColors.InputPlaceholderBackgroundChecked;
var restActiveSectionColor = theme.SemanticColors.SmallInputBorder;
var restInactiveSectionColor = theme.SemanticColors.DisabledBorder;
var disabledActiveSectionColor = theme.SemanticTextColors.DisabledText;
var disabledInactiveSectionColor = theme.SemanticColors.DisabledBackground;
var thumbBackgroundColor = theme.SemanticColors.InputBackground;
var thumbBorderColor = theme.SemanticColors.SmallInputBorder;
var thumbDisabledBorderColor = theme.SemanticColors.DisabledBorder;
var sliderRules = new HashSet <IRule>();
#region root
sliderRules.AddCssStringSelector($".{GlobalClassNames["root"]}").AppendCssStyles(
$"font-size:{theme.FontStyle.FontSize.Medium}",
$"font-weight:{theme.FontStyle.FontWeight.Regular}",
"user-select:none"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["root"]}.{GlobalClassNames["column"]}").AppendCssStyles(
"margin-right:8px"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["titleLabel"]}").AppendCssStyles(
"padding:0"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["container"]}").AppendCssStyles(
"display:flex",
"flex-wrap:nowrap",
"align-items:center"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["container"]}").AppendCssStyles(
"flex-direction:column",
"height:100%",
"text-align:center",
"margin:8px 0"
);
#endregion
#region slideBox
var focusStyleProps = new FocusStyleProps(theme); //default everything
var props = FocusStyle.GetFocusStyle(focusStyleProps, $".{GlobalClassNames["slideBox"]}");
foreach (var rule in props.AddRules)
{
sliderRules.Add(rule);
}
sliderRules.AddCssStringSelector($".{GlobalClassNames["slideBox"]}")
.AppendCssStyles(props.MergeRulesList.ToArray())
.AppendCssStyles(
"background:transparent",
"border:none",
"flex-grow:1",
"line-height:28",
"display:flex",
"align-items:center"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["activeSection"]}")
.AppendCssStyles(
$"background-color:{pressedActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["activeSection"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["activeSection"]}")
.AppendCssStyles(
$"background-color:{hoveredActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["activeSection"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["inactiveSection"]}")
.AppendCssStyles(
$"background-color:{hoveredPressedinactiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["inactiveSection"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["inactiveSection"]}")
.AppendCssStyles(
$"background-color:{hoveredPressedinactiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["inactiveSection"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
$"border:2px solid {pressedActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["thumb"]} {{border-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
$"border:2px solid {pressedActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["thumb"]} {{border-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
$"background-color:{theme.SemanticColors.InputPlaceholderBackgroundChecked}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:active .{GlobalClassNames["zeroTick"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
$"background-color:{theme.SemanticColors.InputPlaceholderBackgroundChecked}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["enabled"]} .{GlobalClassNames["slideBox"]}:hover .{GlobalClassNames["zeroTick"]} {{background-color:Highlight;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["slideBox"]}")
.AppendCssStyles(props.MergeRulesList.ToArray())
.AppendCssStyles(
"height:100%",
"width:28px",
"padding:8px 0"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["slideBox"]}")
.AppendCssStyles(props.MergeRulesList.ToArray())
.AppendCssStyles(
"height:28px",
"width:auto",
"padding:0 8px"
);
#endregion
#region thumb
sliderRules.AddCssStringSelector($".{GlobalClassNames["thumb"]}")
.AppendCssStyles(
"border-width:2px",
"border-style:solid",
$"border-color:{thumbBorderColor}",
"border-radius:10px",
"box-sizing:border-box",
$"background:{thumbBackgroundColor}",
"display:block",
"width:16px",
"height:16px",
"position:absolute"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
"left:-6px",
"margin:0 auto",
"transform:translateY(8px)"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
"top:-6px",
"transform:translateX(-50%)" //skip RTL
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["showTransitions"]} .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
$"transition:left {theme.Animation.Duration3} {theme.Animation.EasingFunction1}"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["disabled"]} .{GlobalClassNames["thumb"]}")
.AppendCssStyles(
$"border-color:{thumbDisabledBorderColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["disabled"]} .{GlobalClassNames["thumb"]} {{border-color:GrayText;}}"
}
});
#endregion
#region line
sliderRules.AddCssStringSelector($".{GlobalClassNames["line"]}")
.AppendCssStyles(
"display:flex",
"position:relative"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["line"]}")
.AppendCssStyles(
"height:100%",
"width:4px",
"margin:0 auto",
"flex-direction:column-reverse"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["line"]}")
.AppendCssStyles(
"width:100%"
);
#endregion
#region lineContainer
sliderRules.AddCssStringSelector($".{GlobalClassNames["lineContainer"]}")
.AppendCssStyles(
"border-radius:4px",
"box-sizing:border-box"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["lineContainer"]}")
.AppendCssStyles(
"height:100%",
"width:4px"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["lineContainer"]}")
.AppendCssStyles(
"width:100%",
"height:4px"
);
#endregion
#region activeSection
sliderRules.AddCssStringSelector($".{GlobalClassNames["activeSection"]}")
.AppendCssStyles(
$"background:{restActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["activeSection"]} {{background-color:WindowText;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["showTransitions"]} .{GlobalClassNames["activeSection"]}")
.AppendCssStyles(
$"transition:width {theme.Animation.Duration3} {theme.Animation.EasingFunction1}"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["disabled"]} .{GlobalClassNames["activeSection"]}")
.AppendCssStyles(
$"background:{disabledActiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["disabled"]} .{GlobalClassNames["activeSection"]} {{background-color:GrayText;border-color:GrayText;}}"
}
});
#endregion
#region inactiveSection
sliderRules.AddCssStringSelector($".{GlobalClassNames["inactiveSection"]}")
.AppendCssStyles(
$"background:{restInactiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["inactiveSection"]} {{border:1px solid WindowText;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["showTransitions"]} .{GlobalClassNames["inactiveSection"]}")
.AppendCssStyles(
$"transition:width {theme.Animation.Duration3} {theme.Animation.EasingFunction1}"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["disabled"]} .{GlobalClassNames["inactiveSection"]}")
.AppendCssStyles(
$"background:{disabledInactiveSectionColor}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["disabled"]} .{GlobalClassNames["inactiveSection"]} {{border-color:GrayText;}}"
}
});
#endregion
#region zeroTick
sliderRules.AddCssStringSelector($".{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
"position:absolute",
$"background:{theme.SemanticColors.DisabledBorder}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["zeroTick"]} {{background-color:WindowText;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["disabled"]} .{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
$"background:{theme.SemanticColors.DisabledBackground}"
);
sliderRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = $".{GlobalClassNames["disabled"]} .{GlobalClassNames["zeroTick"]} {{background-color:GrayText;}}"
}
});
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
"width:16px",
"height:1px",
"transform:translateX(-6px)" //skip RTL
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["zeroTick"]}")
.AppendCssStyles(
"width:1px",
"height:16px",
"transform:translateY(-6px)"
);
#endregion
#region valueLabel
sliderRules.AddCssStringSelector($".{GlobalClassNames["valueLabel"]}")
.AppendCssStyles(
"flex-shrink:1",
"width:30px",
"line-height:'1'" //string meaning relative to size of font
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["column"]} .{GlobalClassNames["valueLabel"]}")
.AppendCssStyles(
"margin:0 auto",
"white-space:nowrap",
"width:40px"
);
sliderRules.AddCssStringSelector($".{GlobalClassNames["row"]} .{GlobalClassNames["valueLabel"]}")
.AppendCssStyles(
"margin:0 8px",
"white-space:nowrap",
"width:40px"
);
#endregion
return(sliderRules);
}
public ICollection <Rule> CreateGlobalCss(ITheme theme)
{
var columnRules = new HashSet <Rule>();
// ROOT
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".msDetailsColumn"
},
Properties = new CssString()
{
Css = $"font-size:{theme.FontStyle.FontSize.Small};" +
$"font-weight:{theme.FontStyle.FontWeight.Regular};"
}
});
var cellStyles = BFUDetailsHeader <TItem> .GetCellStyles(".ms-DetailsColumn", theme);
foreach (var rule in cellStyles)
{
columnRules.Add(rule);
}
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-actionable:hover"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.BodyText};" +
$"background:{theme.SemanticColors.ListHeaderBackgroundHovered};"
}
});
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-actionable:active"
},
Properties = new CssString()
{
Css = $"background:{theme.SemanticColors.ListHeaderBackgroundPressed};"
}
});
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-empty"
},
Properties = new CssString()
{
Css = $"text-overflow:clip;"
}
});
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-padded"
},
Properties = new CssString()
{
Css = $"padding-right:{BFUDetailsRow<TItem>.CellExtraRightPadding + BFUDetailsRow<TItem>.CellRightPadding}px;"
}
});
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-padded:hover i[data-icon-name='GripperBarVertical']"
},
Properties = new CssString()
{
Css = $"display:block;"
}
});
//GripperBarVerticalStyle
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-gripperBar"
},
Properties = new CssString()
{
Css = $"display:none;" +
$"position:absolute;" +
$"text-align:left;" +
$"color:{theme.Palette.NeutralTertiary};" +
$"left:1px;"
}
});
//NearIcon
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-nearIcon"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.BodySubtext};" +
$"opacity:1;" +
$"padding-left:8px;"
}
});
//SortIcon
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-sortIcon"
},
Properties = new CssString()
{
Css = $"color:{theme.SemanticTextColors.BodySubtext};" +
$"opacity:1;" +
$"padding-left:4px;" +
$"position:relative;" +
$"top:1px;"
}
});
////IconClassName
//columnRules.Add(new Rule()
//{
// Selector = new CssStringSelector() { SelectorName = ".ms-DetailsColumn-iconClassName" },
// Properties = new CssString()
// {
// Css = $"color:{theme.SemanticTextColors.BodySubtext};" +
// $"opacity:1;" +
// $"padding-left:8px;"
// }
//});
//FilterChevron
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-filterChevron"
},
Properties = new CssString()
{
Css = $"color:{theme.Palette.NeutralTertiary};" +
$"padding-left:6px;" +
$"vertical-align:middle;" +
$"font-size:{theme.FontStyle.FontSize.Small};"
}
});
//CellTitle
var cellTitleFocusStyles = FocusStyle.GetFocusStyle(new FocusStyleProps(theme), ".ms-DetailsColumn-cellTitle");
foreach (var rule in cellTitleFocusStyles.AddRules)
{
columnRules.Add(rule);
}
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-cellTitle"
},
Properties = new CssString()
{
Css = cellTitleFocusStyles.MergeRules +
$"display:flex;" +
$"flex-direction:row;" +
$"justify-content:flex-start;" +
$"align-items:stretch;" +
$"box-sizing:border-box;" +
$"overflow:hidden;" +
$"padding:0 {BFUDetailsRow<TItem>.CellRightPadding}px 0 {BFUDetailsRow<TItem>.CellLeftPadding}px;"
}
});
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn.is-iconOnly .ms-DetailsColumn-cellTitle .ms-DetailsColumn-nearIcon"
},
Properties = new CssString()
{
Css = $"padding-left:0;"
}
});
//CellTitle
columnRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsColumn-cellTooltip"
},
Properties = new CssString()
{
Css = $"display:block;" +
$"position:absolute;" +
$"top:0;" +
$"left:0;" +
$"bottom:0;" +
$"right:0;"
}
});
return(columnRules);
}