コード例 #1
0
        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");
        }
コード例 #2
0
        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}");
        }
コード例 #3
0
        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);
        }
コード例 #4
0
        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}");
        }
コード例 #5
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);
        }
コード例 #6
0
        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);
        }
コード例 #7
0
        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);
        }