Beispiel #1
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);
        }