Styles

Styles are all predefined in Wisej.NET and roughly correspond to CSS3 styles. Wisej.NET creates a dynamic CSS class and applies it to the widgets that use the appearance key and match the state that contains the style. It's very similar to using CSS classes with HTML elements.

Some styles can be overridden by properties: i.e. The backgroundColor style is overridden by the backgroundColor property. The main differences between styles and properties are:

• An application cannot change a style value, only a theme can.

• Styles go into CSS classes named using the appearance key + state that contains the style, while properties are rendered on the widget's DOM element.

• Styles are limited to the Decorators supported by the Wisej.NET JavaScript implementation. Decorators are JavaScript classes in charge of converting the styles set in the theme to CSS values.

• Properties are unlimited. The JavaScript that defines a widget can add any number of themeable properties.

Supported Styles

This is the full list of all the supported styles:

• gradientStart

  Property group: [startColor, startColorPosition]

Property groups are composite properties that can set the values of other properties using a shorthand array. See Property Group for more information.

• gradientEnd

  Property group: [ endColor, endColorPosition ]

• startColor

  Start color of the background gradient.

• startColorPosition

  Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 0.

• endColor

  End color of the background gradient.

• endColorPosition

  Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 100.

• orientation

  The orientation of the gradient. Allowed values: "horizontal", "vertical"

• colorPositionUnit

  Defines if the given gradient color position values are in % or px.

• backgroundColor

  Color of the background.

• backgroundImage

  The URL or theme name of the background image

• backgroundRepeat

  How the background image should be repeated. Allowed values: "repeat", "repeat-x", "repeat-y", "no-repeat", "scale".

• backgroundSize

  The background size. Allowed values: "auto", CSS size, i.e. "60px 120px", "cover", "contain". See CSS3 background-size.

• fillColor

  The fill color for background SVG images.

• backgroundPosition

  Property group: [ backgroundPositionX, backgroundPositionY ]

• backgroundPositionX

  Either a string or a number, which defines the horizontal position of the background image. Allowed values: Integer, "center", "left", "right".

• backgroundPositionY

  Either a string or a number, which defines the vertical position of the background image. Allowed values: Integer, "center", "top", "bottom".

• borderImage

  Specify an image as the border around an element. This style allows you to specify an image to be used instead of the normal border around an element. See CSS3 border-image.

• slice

  Property group: [ sliceTop, sliceRight, sliceBottom, sliceLeft ]

• sliceTop

  The top slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.

• sliceRight

  The right slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.

• sliceBottom

  The bottom slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.

• sliceLeft

  The left slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.

• repeat

  Property group: [ repeatX, repeatY ]

• repeatX

  Specifies how the images for the sides and the middle part of the border image are scaled and tiled horizontally. Allowed values: "stretch", "repeat", "round".

• repeatY

  Specifies how the images for the sides and the middle part of the border image are scaled and tiled vertically. Allowed values: "stretch", "repeat", "round".

• fill

  Specifies whether to use the central part of the border image to fill the element. Allowed values: true, false. Default: true.

• borderImageMode

  Configures the border image mode. Allowed values: "horizontal" (left and right borders), "vertical" (top and bottom borders), "grid" (all edges).

• radius

  Property group: [ radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft ]

• radiusTopLeft

  Top left corner radius in pixels.

• radiusTopRight

  Top right corner radius in pixels.

• radiusBottomRight

  Bottom right corner radius in pixels.

• radiusBottomLeft

  Bottom left corner radius in pixels.

• shadowColor

  The color of the shadow.

• shadowSpreadRadius

  The spread radius of the shadow in pixels.

• shadowBlurRadius

  The blur radius of the shadow in pixels.

• shadowLength

  Property group: [ shadowVerticalLength, shadowHorizontalLength ]

• shadowVerticalLength

  Vertical length of the shadow in pixels.

• shadowHorizontalLength

  Horizontal length of the shadow in pixels.

• inset

  Specifies whether the shadows are drawn inside the border. Allowed value: true, false. Default: false.

• left

  Property group: [ widthLeft, styleLeft, colorLeft ]

• right

  Property group: [ widthRight, styleRight, colorRight ]

• top

  Property group: [ widthTop, styleTop, colorTop ]

• bottom

  Property group: [ widthBottom, styleBottom, colorBottom ]

• width

  Property group: [widthTop, widthRight, widthBottom, widthLeft ]

• widthTop

  Top width of border in pixels.

• widthRight

  Right width of border in pixels.

• widthBottom

  Bottom width of border in pixels.

• widthLeft

  Left width of border in pixels.

• style

  Property group: [ styleTop, styleRight, styleBottom, styleLeft ]

• styleTop

  Top style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• styleRight

  Right style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• styleBottom

  Bottom style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• styleLeft

  Left style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• color

  Property group: [ colorTop, colorRight, colorBottom, colorLeft ]

• colorTop

  Top color of the border.

• colorRight

  Right color of the border.

• colorBottom

  Bottom color of the border.

• colorLeft

  Left color of the border.

• innerWidth

  Property group: [ innerWidthTop, innerWidthRight, innerWidthBottom, innerWidthLeft ]

• innerWidthTop

  Top inner border width in pixels.

• innerWidthRight

  Right inner border width in pixels.

• innerWidthBottom

  Bottom inner border width in pixels.

• innerWidthLeft

  Left inner border width in pixels.

• innerColor

  Property group: [ innerColorTop, innerColorRight, innerColorBottom, innerColorLeft ]

• innerColorTop

  Top inner border color.

• innerColorRight

  Right inner border color.

• innerColorBottom

  Bottom inner border color.

• innerColorLeft

  Left inner border color.

• innerOpacity

  The opacity of the inner border as a decimal value. Default: 1.

• innerStyle

  Property group: [ innerStyleTop, innerStyleRight, innerStyleBottom, innerStyleLeft ]

• innerStyleTop

  Top style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• innerStyleRight

  Right style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• innerStyleBottom

  Bottom style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• innerStyleLeft

  Left style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".

• clip

  Specify the painting area of the background. Allowed values: "border-box", "padding-box", "content-box", "initial", "inherit".

• transform

  CSS3 transform string. See CSS3 transform.

• transition

  CSS3 transition string. See CSS3 transition.

  This style allows a theme to define simple animations.

• css

  Custom CSS3 rules.

  The css style can define complex CSS3 rules and pseudo element. There is no limit to what can be defined in the css style. This is the animation and pseudo element used in the Material-3 theme when an editable widget gains the focus:

"css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(1)\",\"transition\":\"all 0.3s\"}}

When setting CSS properties directly, Wisej supports both the HTML notation (i.e. "background-color") and the DOM notation (i.e. "backgroundColor").

Property Group

Property groups are composite properties that can set the values of other properties using a shorthand array. The code below shows a property group used to set related properties. In a theme definition file you can set a property group or a single property or both; they are applied in the order they are declared.

gradientStart and radius property groups

"styles":
{
  "gradientStart": ["activeButton", "25"],
  "radius": [3, 3, 3, 3]
}

The definition above is equivalent to:

gradientStart and radius properties

"styles":
{
  "startColor": ["activeButton", "25"],
  "startColorPosition": ["activeButton", "25"],
  "radiusTopLeft": 3,
  "radiusTopRight": 3,
  "radiusBottomRight": 3,
  "radiusBottomLeft": 3
}

Property groups that contain CSS values for the four sides or four corners of an element follow the TRBL pattern (top, right, bottom, left).