private string ShowNumber(FocusStyle focusStyle)
 {
     switch (this.myStyle)
     {
     case NumberStyle.AllInteger:
     case NumberStyle.AllFloat:
         return(String.Format(this.getDecimalDigitsString(focusStyle), this.myValue));
     }
     return("");
 }
        private string getDecimalDigitsString(FocusStyle enmFocus)
        {
            string str = "";
            int    num = 1;

            switch (enmFocus)
            {
            case FocusStyle.GotFocus:

                if (!this.myZeroShow)
                {
                    str = "####";
                }
                else
                {
                    str = "###0";
                }

                break;

            case FocusStyle.LostFocus:
                if (!this.myZeroShow)
                {
                    str = "#,###";
                    break;
                }
                else
                {
                    str = "#,##0";
                }

                break;
            }

            int myDecimalDigits = this.myDecimalDigits;

            for (num = 1; num <= myDecimalDigits; num++)
            {
                if (str.Trim().Contains("."))
                {
                    str = str + "0";
                }
                else
                {
                    str = str + ".0";
                }
            }
            if (!myShowComma)
            {
                str = str.Replace(",", "");
            }
            return("{0:" + str + "}");
        }
        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);
        }
Ejemplo n.º 4
0
        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);
        }
Ejemplo n.º 5
0
        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);
        }
Ejemplo n.º 6
0
        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);
        }
Ejemplo n.º 7
0
        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);
        }
Ejemplo n.º 8
0
        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);
        }