private void AddCustomContentWrapperStyle(HashSet <IRule> rules, ITheme theme)
{
rules.AddCssStringSelector(".custom-content .ms-ChoiceField-customContentWrapper").AppendCssStyles(
"padding-bottom:2px",
"transition-property:opacity",
$"transition-duration:{_transitionDuration}",
"transition-timing-function:ease");
rules.AddCssStringSelector(".ms-ChoiceField-customContentWrapper .ms-Image").AppendCssStyles(
"display:inline-block",
"border-style:none");
}
private void AddFieldWithCustomContentRules(HashSet <IRule> rules, ITheme theme, string pseudoSelector)
{
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled).is-checked.custom-content .ms-ChoiceField-field:{pseudoSelector}").AppendCssStyles(
$"border-color:{theme.Palette.ThemeDark}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled):not(.is-checked).custom-content .ms-ChoiceField-field:{pseudoSelector}").AppendCssStyles(
$"border-color:{theme.SemanticColors.InputBorderHovered}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled) .is-checked.custom-content .ms-ChoiceField-field:{pseudoSelector}:before").AppendCssStyles(
"opacity:1",
$"border-color:{theme.Palette.ThemeDark}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled):not(.is-checked).custom-content .ms-ChoiceField-field:{pseudoSelector}:before").AppendCssStyles(
"opacity:1",
$"border-color:{theme.SemanticColors.InputBorderHovered}");
}
public ICollection <IRule> CreateGlobalCss(ITheme theme)
{
var choiceGroupRules = new HashSet <IRule>();
#region Root
choiceGroupRules.AddCssStringSelector(".ms-ChoiceFieldGroup").AppendCssStyles(
$"font-size:{theme.FontStyle.FontSize.Medium}",
$"font-weight:{theme.FontStyle.FontWeight.Regular}",
"display:block");
choiceGroupRules.AddCssStringSelector(".ms-ChoiceFieldGroup-flexContainer.flex-direction-row").AppendCssStyles(
"display:flex",
"flex-direction:row",
"flex-wrap:wrap");
#endregion
return(choiceGroupRules);
}
private void AddFieldHoverOrFocusStyles(HashSet <IRule> rules, ITheme theme, string pseudoSelector)
{
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled) .ms-ChoiceField-field:{pseudoSelector} .ms-ChoiceFieldLabel").AppendCssStyles(
$"color:{theme.Palette.NeutralDark}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled) .is-checked .ms-ChoiceField-field:{pseudoSelector}:before").AppendCssStyles(
$"border-color:{theme.Palette.ThemeDark}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled):not(.is-checked) .ms-ChoiceField-field:{pseudoSelector}:before").AppendCssStyles(
$"border-color:{theme.SemanticColors.InputBorderHovered}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled):not(.is-checked):not(.custom-content) .ms-ChoiceField-field:{pseudoSelector}:after").AppendCssStyles(
"content:''",
"transition-property:background-color",
"left:5px",
"top:5px",
"width:10px",
"height:10px",
$"background-color:{theme.Palette.NeutralSecondary}");
rules.AddCssStringSelector($".ms-ChoiceField:not(.is-disabled) .is-checked .ms-ChoiceField-field:{pseudoSelector}").AppendCssStyles(
$"border-color:{theme.Palette.ThemeDark}");
}
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 <IRule> CreateGlobalCss(ITheme theme)
{
var defaultHeaderText = theme.Palette.NeutralPrimary;
var defaultMetaText = theme.Palette.NeutralSecondary;
var defaultBackground = theme.Palette.White;
// Default Hover
var defaultHoverHeaderText = theme.Palette.NeutralDark;
var defaultHoverMetaText = theme.Palette.NeutralPrimary;
var defaultHoverBackground = theme.Palette.NeutralLighter;
// Selected
var selectedHeaderText = theme.Palette.NeutralDark;
var selectedMetaText = theme.Palette.NeutralPrimary;
var selectedBackground = theme.Palette.NeutralLight;
// Selected Hover
var selectedHoverHeaderText = theme.Palette.NeutralDark;
var selectedHoverMetaText = theme.Palette.NeutralPrimary;
var selectedHoverBackground = theme.Palette.NeutralQuaternaryAlt;
// Focus
var focusHeaderText = theme.Palette.NeutralDark;
var focusMetaText = theme.Palette.NeutralPrimary;
var focusBackground = theme.Palette.NeutralLight;
var focusHoverBackground = theme.Palette.NeutralQuaternaryAlt;
var detailsRowRules = new HashSet <IRule>();
// 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-List-cell:first-child .ms-DetailsRow:before"
},
Properties = new CssString()
{
Css = $"display:none;"
}
});
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;
rootSelectedFocusStyleProps.Inset = -1;
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:{selectedMetaText};" +
$"background:{selectedBackground};" +
$"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;" +
"}"
}
});
// focus for is-selected
detailsRowRules.AddCssStringSelector(".ms-DetailsRow.is-selected:focus").AppendCssStyles(
$"background:{focusBackground}"
);
detailsRowRules.AddCssStringSelector(".ms-DetailsRow.is-selected:focus .ms-DetailsRow-cell").AppendCssStyles(
$"color:{focusMetaText}"
);
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-selected:focus .ms-DetailsRow-cell {" +
$"color:HighlightText;" +
"}" +
".ms-DetailsRow.is-selected:focus .ms-DetailsRow-cell > a {" +
$"background:Highlight;" +
"}"
}
});
detailsRowRules.AddCssStringSelector(".ms-DetailsRow.is-selected.is-row-header:focus ").AppendCssStyles(
$"color:{focusHeaderText}"
);
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:focus {" +
$"color:HighlightText;" +
"}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-selected:focus {" +
$"background:HighlightText;" +
"}"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = "@media screen and (-ms-high-contrast: active)"
},
Properties = new CssString()
{
Css = ".ms-DetailsRow.is-selected{" +
"background:Highlight;" +
"color:HighlightText;" +
"-ms-high-contrast-adjust:none;" +
"}" +
".ms-DetailsRow.is-selected a {" +
"color:HighlightText;" +
"}"
}
});
//focus and hover state
detailsRowRules.AddCssStringSelector(".ms-DetailsRow.is-selected.is-row-header:focus ").AppendCssStyles(
$"background:{focusHoverBackground}"
);
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-compact"
},
Properties = new CssString()
{
Css = $"min-height:{CompactRowHeight}px;" +
"border:0"
}
});
detailsRowRules.Add(new Rule()
{
Selector = new CssStringSelector()
{
SelectorName = ".ms-DetailsRow.is-compact.is-selected:before"
},
Properties = new CssString()
{
Css = $"display:none;"
}
});
// 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;"
}
});
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 choiceGroupOptionRules = new HashSet <IRule>();
#region Root
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField").AppendCssStyles(
$"font-size:{theme.FontStyle.FontSize.Medium}",
$"font-weight:{theme.FontStyle.FontWeight.Regular}",
"display:flex",
"align-items:center",
"box-sizing:border-box",
$"color:{theme.SemanticTextColors.BodyText}",
"min-height:26px",
"border:none",
"position:relative",
"margin-top:8px");
#endregion
#region Label
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceFieldLabel").AppendCssStyles(
$"color: {theme.Palette.NeutralDark}",
"display:inline-block");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField:not(.custom-content) .ms-ChoiceFieldLabel").AppendCssStyles(
"padding-left:26px");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField.custom-content").AppendCssStyles(
"display:inline-flex",
"font-size:0",
"margin:0 4px 4px 0",
"padding-left:0",
$"background-color:{theme.Palette.NeutralLighter}",
"height:100%");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceFieldLabel:before").AppendCssStyles(
$"color: {theme.SemanticColors.InputBorderHovered}",
$"border-color: {theme.SemanticColors.InputBorderHovered}");
choiceGroupOptionRules.AddCssStringSelector(".is-checked .ms-ChoiceFieldLabel:before").AppendCssStyles(
$"color: {theme.Palette.ThemeDark}",
$"border-color: {theme.Palette.ThemeDark}");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField:not(.is-checked):not(.custom-content) .ms-ChoiceFieldLabel:after").AppendCssStyles(
"content:''",
"transition-property:background-color",
"left:5px",
"top:5px",
"width:10px",
"height:10px",
$"background-color:{theme.Palette.NeutralSecondary}");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField.is-checked .ms-ChoiceFieldLabel:after").AppendCssStyles(
$"border-color: {theme.Palette.ThemeDark}");
#endregion
#region ChoiceFieldWrapper
// TODO: flesh this out
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-wrapper:focus").AppendCssStyles(
"");
#endregion
#region Input
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-input").AppendCssStyles(
"position:absolute",
"opacity:0",
"top:0px",
"right:0px",
"width:100%",
"height:100%",
"margin:0");
#endregion
#region Field
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-field").AppendCssStyles(
"display:inline-block",
"cursor:pointer",
"margin-top:0",
"position:relative",
"vertical-align:top",
"user-select:none",
"min-height:20px");
this.AddFieldHoverOrFocusStyles(choiceGroupOptionRules, theme, "hover");
this.AddFieldHoverOrFocusStyles(choiceGroupOptionRules, theme, "focus");
choiceGroupOptionRules.AddCssStringSelector(".custom-content .ms-ChoiceField-field").AppendCssStyles(
"box-sizing:content-box",
"cursor:pointer",
"padding-top:22px",
"margin:0",
"text-align:center",
"transition-property:all",
$"transition-duration:{_transitionDuration}",
$"transition-timing-function:ease",
"border: 1px solid transparent",
"justify-content:center",
"align-items:center",
"display:flex",
"flex-direction:column");
choiceGroupOptionRules.AddCssStringSelector(".is-checked.custom-content .ms-ChoiceField-field").AppendCssStyles(
$"border-color:{theme.SemanticColors.InputBackgroundChecked}");
this.AddFieldWithCustomContentRules(choiceGroupOptionRules, theme, "hover");
this.AddFieldWithCustomContentRules(choiceGroupOptionRules, theme, "focus");
choiceGroupOptionRules.AddCssStringSelector(".is-disabled .ms-ChoiceField-field").AppendCssStyles(
"cursor:default");
choiceGroupOptionRules.AddCssStringSelector(".is-disabled .ms-ChoiceFieldLabel").AppendCssStyles(
$"color:{theme.SemanticTextColors.DisabledBodyText}");
choiceGroupOptionRules.AddCssClassSelector($".is-disabled {CommonStyles.HighContrastSelector}").AppendCssStyles(
"color:GrayText");
choiceGroupOptionRules.AddCssClassSelector($".is-checked .is-disabled .ms-ChoiceField").AppendCssStyles(
$"border-color:{theme.Palette.NeutralLighter}");
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-labelWrapper").AppendCssStyles(
$"font-size:{theme.FontStyle.FontSize.Medium}",
$"font-weight:{theme.FontStyle.FontWeight.Regular}");
#endregion
#region OuterCircle
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-field:before").AppendCssStyles(
"content:''",
"display:inline-block",
$"background-color:{theme.SemanticColors.BodyBackground}",
"border-width:1px",
"border-style:solid",
$"border-color:{theme.Palette.NeutralPrimary}",
$"width:{_choiceFieldSize}px",
$"height:{_choiceFieldSize}px",
"font-weight:normal",
"position:absolute",
"top:0",
"left:0",
"box-sizing:border-box",
"transition-property:border-color",
$"transition-duration:{_transitionDuration}",
$"transition-timing-function:{_transitionTimingFunction}",
"border-radius:50%");
choiceGroupOptionRules.AddCssStringSelector(".is-disabled .ms-ChoiceField-field:before").AppendCssStyles(
$"border-color:{theme.SemanticTextColors.DisabledBodySubtext}");
choiceGroupOptionRules.AddCssStringSelector($".is-disabled {CommonStyles.HighContrastSelector} .ms-ChoiceField-field:before").AppendCssStyles(
"color:GrayText");
choiceGroupOptionRules.AddCssStringSelector(".is-checked .ms-ChoiceField-field:before").AppendCssStyles(
$"border-color:{theme.SemanticColors.InputBackgroundChecked}");
choiceGroupOptionRules.AddCssStringSelector(".custom-content .ms-ChoiceField-field:before").AppendCssStyles(
$"top:{_radioButtonSpacing}px",
$"right:{_radioButtonSpacing}px",
"left:auto",
"opacity:0");
choiceGroupOptionRules.AddCssStringSelector(".is-checked.custom-content .ms-ChoiceField-field:before").AppendCssStyles(
"opacity:1");
#endregion
#region SelectionCircle
choiceGroupOptionRules.AddCssStringSelector(".ms-ChoiceField-field:after").AppendCssStyles(
"content:''",
"width:0",
"height:0",
"border-radius:50%",
"position: absolute",
$"left:{_choiceFieldSize / 2}px",
"right:0",
"transition-property:border-width",
$"transition-duration:{_transitionDuration}",
$"transition-timing-function:{_transitionTimingFunction}",
"box-sizing:border-box");
choiceGroupOptionRules.AddCssStringSelector(".is-checked .ms-ChoiceField-field:after").AppendCssStyles(
"border-width:5px",
"border-style:solid",
$"border-color:{theme.SemanticColors.InputBackgroundChecked}",
"left:5px",
"top:5px",
"width:10px",
"height:10px");
choiceGroupOptionRules.AddCssStringSelector(".is-checked.custom-content .ms-ChoiceField-field:after").AppendCssStyles(
$"top:{_radioButtonSpacing + _radioButtonInnerSize}px",
$"right:{_radioButtonSpacing + _radioButtonInnerSize}px",
"left:auto");
#endregion
#region Inner Field
choiceGroupOptionRules.AddCssStringSelector(".custom-content .ms-ChoiceField-innerField").AppendCssStyles(
"position:relative",
"display:inline-block",
"padding-left:30px",
"padding-right:30px");
choiceGroupOptionRules.AddCssStringSelector(".is-disabled.custom-content .ms-ChoiceField-innerField").AppendCssStyles(
"opacity:0.25");
choiceGroupOptionRules.AddCssStringSelector($".is-disabled.custom-content {CommonStyles.HighContrastSelector} .ms-ChoiceField-innerField").AppendCssStyles(
"opacity:0.25");
#endregion
#region ImageWrapper
this.AddCustomContentWrapperStyle(choiceGroupOptionRules, theme);
#endregion
#region LabelWrapper
choiceGroupOptionRules.AddCssStringSelector($".custom-content .ms-ChoiceField-labelWrapper").AppendCssStyles(
$"font-size:{theme.FontStyle.FontSize.Medium}",
$"font-weight:{theme.FontStyle.FontWeight.Regular}",
"display:flex",
"position:relative",
"margin:4px 8px 2px 8px",
$"height:{_labelWrapperHeight}px",
$"line-height:{_labelWrapperLineHeight}px",
"overflow:hidden",
"white-space:pre-wrap");
#endregion
return(choiceGroupOptionRules);
}
