@uifabric/merge-styles

export declare type ICSSRule = 'initial' | 'inherit' | 'unset'; export declare type ICSSPercentageRule = string; export declare type ICSSPixelUnitRule = string | number; export declare type ICSSBaselinePositionRule = 'baseline' | 'last baseline' | 'first baseline'; export declare type ICSSOverflowAndSelfPositionRule = 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'safe center' | 'safe start' | 'safe end' | 'safe self-start' | 'safe self-end' | 'safe flex-start' | 'safe flex-end' | 'unsafe center' | 'unsafe start' | 'unsafe end' | 'unsafe self-start' | 'unsafe self-end' | 'unsafe flex-start' | 'unsafe flex-end'; export declare type ICSSDisplayRule = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid'; export declare type IFontWeight = ICSSRule | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | 100 | '200' | 200 | '300' | 300 | '400' | 400 | '500' | 500 | '600' | 600 | '700' | 700 | '800' | 800 | '900' | 900; export declare type IMixBlendModes = ICSSRule | 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'; /** * The base font style. * {@docCategory IRawFontStyle} */ export interface IRawFontStyle { /** * The font property is shorthand that allows you to do one of two things: you can * either set up six of the most mature font properties in one line, or you can set * one of a choice of keywords to adopt a system font setting. */ font?: ICSSRule | string; /** * The font-family property allows one or more font family names and/or generic family * names to be specified for usage on the selected element(s)' text. The browser then * goes through the list; for each character in the selection it applies the first * font family that has an available glyph for that character. */ fontFamily?: ICSSRule | string; /** * The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e. * the spaces between the characters in text. This property controls <bold>metric * kerning</bold> - that utilizes adjustment data contained in the font. Optical * Kerning is not supported as yet. */ fontKerning?: ICSSRule | string; /** * Specifies the size of the font. Used to compute em and ex units. * See CSS 3 font-size property https://www.w3.org/TR/css-fonts-3/#propdef-font-size */ fontSize?: ICSSRule | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'larger' | 'smaller' | ICSSPixelUnitRule | ICSSPercentageRule; /** * The font-size-adjust property adjusts the font-size of the fallback fonts defined * with font-family, so that the x-height is the same no matter what font is used. * This preserves the readability of the text when fallback happens. * See CSS 3 font-size-adjust property * https://www.w3.org/TR/css-fonts-3/#propdef-font-size-adjust */ fontSizeAdjust?: ICSSRule | 'none' | number | string; /** * Allows you to expand or condense the widths for a normal, condensed, or expanded * font face. * See CSS 3 font-stretch property * https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch */ fontStretch?: ICSSRule | 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | string; /** * The font-style property allows normal, italic, or oblique faces to be selected. * Italic forms are generally cursive in nature while oblique faces are typically * sloped versions of the regular face. Oblique faces can be simulated by artificially * sloping the glyphs of the regular face. * See CSS 3 font-style property https://www.w3.org/TR/css-fonts-3/#propdef-font-style */ fontStyle?: ICSSRule | 'normal' | 'italic' | 'oblique' | string; /** * This value specifies whether the user agent is allowed to synthesize bold or * oblique font faces when a font family lacks bold or italic faces. */ fontSynthesis?: ICSSRule | string; /** * The font-variant property enables you to select the small-caps font within a font * family. */ fontVariant?: ICSSRule | string; /** * Fonts can provide alternate glyphs in addition to default glyph for a character. * This property provides control over the selection of these alternate glyphs. */ fontVariantAlternates?: ICSSRule | string; /** * Specifies the weight or boldness of the font. * See CSS 3 'font-weight' property https://www.w3.org/TR/css-fonts-3/#propdef-font-weight */ fontWeight?: IFontWeight | string; } /** * Font face definition. * * @public * {@docCategory IFontFace} */ export interface IFontFace extends IRawFontStyle { /** * Specifies the src of the font. */ src?: string; /** * unicode-range allows you to set a specific range of characters to be downloaded * from a font (embedded using \@font-face) and made available for use on the current * page. */ unicodeRange?: ICSSRule | string; /** * Determines how a font face is displayed based on whether and when it is downloaded * and ready to use. */ fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; /** * Feature settings for the font. */ fontFeatureSettings?: string; } /** * All raw style properties. * * @public * {@docCategory IRawStyleBase} */ export interface IRawStyleBase extends IRawFontStyle { /** * (Ms specific) constrast adjust rule. */ MsHighContrastAdjust?: ICSSRule | string; /** * (Ms specific) scrollbar behavior adjust rule. */ MsOverflowStyle?: 'auto' | 'none' | 'scrollbar' | '-ms-autohiding-scrollbar' | string; /** * (Moz specific) font smoothing directive. */ MozOsxFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string; /** * (Webkit specific) font smoothing directive. */ WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string; /** * (Webkit specific) momentum scrolling on iOS devices */ WebkitOverflowScrolling?: 'auto' | 'touch' | string; /** * (Webkit specific) color of the highlight that appears overa link while it's being tapped */ WebkitTapHighlightColor?: string; /** * (Webkit specific) controls the text inflation algorithm used on some smartphones and tablets. * Other browsers will ignore this property. */ WebkitTextSizeAdjust?: 'none' | 'auto' | ICSSPercentageRule | ICSSRule | string; /** * Aligns a flex container's lines within the flex container when there is extra space * in the cross-axis, similar to how justify-content aligns individual items within the main-axis. */ alignContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' | string; /** * Sets the default alignment in the cross axis for all of the flex container's items, * including anonymous flex items, similarly to how justify-content aligns items along the main axis. */ alignItems?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | string; /** * Aligns the box (as the alignment subject) within its containing block (as the alignment container) * along the block/column/cross axis of the alignment container. * * See CSS align-self property * https://www.w3.org/TR/css-align-3/#propdef-align-self */ alignSelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | string; /** * This property allows precise alignment of elements, such as graphics, that do not * have a baseline-table or lack the desired baseline in their baseline-table. With the * alignment-adjust property, the position of the baseline identified by the * alignment-baseline can be explicitly determined. It also determines precisely * the alignment point for each glyph within a textual element. */ alignmentAdjust?: ICSSRule | string; /** * Specifies how an object is aligned with respect to its parent. This property specifies * which baseline of this element is to be aligned with the corresponding baseline of the * parent. For example, this allows alphabetic baselines in Roman text to stay aligned * across font size changes. It defaults to the baseline with the same name as the computed * value of the alignment-baseline property. */ alignmentBaseline?: ICSSRule | string; /** * The animation CSS property is a shorthand property for the various animation properties: * `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, * `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and * `animation-play-state`. */ animation?: ICSSRule | string; /** * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution * some time after it is applied. */ animationDelay?: ICSSRule | string; /** * Defines whether an animation should run in reverse on some or all cycles. */ animationDirection?: ICSSRule | string; /** * Specifies the length an animation takes to finish. Default value is 0, meaning * there will be no animation. */ animationDuration?: ICSSRule | string; /** * The animation-fill-mode CSS property specifies how a CSS animation should apply * styles to its target before and after its execution. */ animationFillMode?: ICSSRule | 'none' | 'forwards' | 'backwards' | 'both' | string; /** * Specifies how many times an animation cycle should play. */ animationIterationCount?: ICSSRule | string; /** * Defines the list of animations that apply to the element. */ animationName?: ICSSRule | string; /** * Defines whether an animation is running or paused. */ animationPlayState?: ICSSRule | string; /** * The animation-timing-function specifies the speed curve of an animation. */ animationTimingFunction?: ICSSRule | string; /** * Allows changing the style of any element to platform-based interface elements or * vice versa. */ appearance?: ICSSRule | string; /** * Lets you apply graphical effects such as blurring or color shifting to the area * behind an element. Because it applies to everything behind the element, to see * the effect you must make the element or its background at least partially transparent. */ backdropFilter?: ICSSRule | string; /** * Edge requires the -webkit prefix backdrop-filter. */ WebkitBackdropFilter?: ICSSRule | string; /** * Determines whether or not the “back” side of a transformed element is visible when * facing the viewer. */ backfaceVisibility?: ICSSRule | string; /** * Shorthand property to set the values for one or more of: * background-clip, background-color, background-image, * background-origin, background-position, background-repeat, * background-size, and background-attachment. */ background?: ICSSRule | string; /** * If a background-image is specified, this property determines * whether that image's position is fixed within the viewport, * or scrolls along with its containing block. * See CSS 3 background-attachment property https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment */ backgroundAttachment?: ICSSRule | 'scroll' | 'fixed' | 'local' | string; /** * This property describes how the element's background images should blend with each * other and the element's background color. The value is a list of blend modes that * corresponds to each background image. Each element in the list will apply to the * corresponding element of background-image. If a property doesn’t have enough * comma-separated values to match the number of layers, the UA must calculate its * used value by repeating the list of values until there are enough. */ backgroundBlendMode?: ICSSRule | string; /** * The background-clip CSS property specifies if an element's background, whether a * `<color>` or an `<image>`, extends underneath its border. * * \* Does not work in IE * * \* The `text` value is experimental and should not be used in production code. */ backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text' | string; /** * Sets the background color of an element. */ backgroundColor?: ICSSRule | string; /** * Sets a compositing style for background images and colors. */ backgroundComposite?: ICSSRule | string; /** * Applies one or more background images to an element. These can be any valid CSS * image, including url() paths to image files or CSS gradients. */ backgroundImage?: ICSSRule | string; /** * Specifies what the background-position property is relative to. */ backgroundOrigin?: ICSSRule | string; /** * Sets the position of a background image. */ backgroundPosition?: ICSSRule | string; /** * Background-repeat defines if and how background images will be repeated after they * have been sized and positioned */ backgroundRepeat?: ICSSRule | string; /** * Sets the size of background images */ backgroundSize?: ICSSRule | string; /** * Shorthand property that defines the different properties of all four sides of an * element's border in a single declaration. It can be used to set border-width, * border-style and border-color, or a subset of these. */ border?: ICSSRule | 0 | string; /** * Shorthand that sets the values of border-bottom-color, * border-bottom-style, and border-bottom-width. */ borderBottom?: ICSSRule | ICSSPixelUnitRule; /** * Sets the color of the bottom border of an element. */ borderBottomColor?: ICSSRule | string; /** * Defines the shape of the border of the bottom-left corner. */ borderBottomLeftRadius?: ICSSRule | ICSSPixelUnitRule; /** * Defines the shape of the border of the bottom-right corner. */ borderBottomRightRadius?: ICSSRule | ICSSPixelUnitRule; /** * Sets the line style of the bottom border of a box. */ borderBottomStyle?: ICSSRule | string; /** * Sets the width of an element's bottom border. To set all four borders, use the * border-width shorthand property which sets the values simultaneously for * border-top-width, border-right-width, border-bottom-width, and border-left-width. */ borderBottomWidth?: ICSSRule | ICSSPixelUnitRule; /** * Border-collapse can be used for collapsing the borders between table cells */ borderCollapse?: ICSSRule | string; /** * The CSS border-color property sets the color of an element's four borders. This * property can have from one to four values, made up of the elementary properties: * • border-top-color * • border-right-color * • border-bottom-color * • border-left-color The default color is the currentColor of each of * these values. * If you provide one value, it sets the color for the element. Two values set the * horizontal and vertical values, respectively. Providing three values sets the top, * vertical, and bottom values, in that order. Four values set all for sides: top, * right, bottom, and left, in that order. */ borderColor?: ICSSRule | string; /** * Specifies different corner clipping effects, such as scoop (inner curves), bevel * (straight cuts) or notch (cut-off rectangles). Works along with border-radius to * specify the size of each corner effect. */ borderCornerShape?: ICSSRule | string; /** * The property border-image-source is used to set the image to be used instead of * the border style. If this is set to none the border-style is used instead. */ borderImageSource?: ICSSRule | string; /** * The border-image-width CSS property defines the offset to use for dividing the * border image in nine parts, the top-left corner, central top edge, top-right-corner, * central right edge, bottom-right corner, central bottom edge, bottom-left corner, * and central right edge. They represent inward distance from the top, right, bottom, * and left edges. */ borderImageWidth?: ICSSRule | ICSSPixelUnitRule; /** * Shorthand property that defines the border-width, border-style and border-color of * an element's left border in a single declaration. Note that you can use the * corresponding longhand properties to set specific individual properties of the left * border — border-left-width, border-left-style and border-left-color. */ borderLeft?: ICSSRule | ICSSPixelUnitRule; /** * The CSS border-left-color property sets the color of an element's left border. This * page explains the border-left-color value, but often you will find it more * convenient to fix the border's left color as part of a shorthand set, either * border-left or border-color. Colors can be defined several ways. For more * information, see Usage. */ borderLeftColor?: ICSSRule | string; /** * Sets the style of an element's left border. To set all four borders, use the * shorthand property, border-style. Otherwise, you can set the borders individually * with border-top-style, border-right-style, border-bottom-style, border-left-style. */ borderLeftStyle?: ICSSRule | string; /** * Sets the width of an element's left border. To set all four borders, use the * border-width shorthand property which sets the values simultaneously for * border-top-width, border-right-width, border-bottom-width, and border-left-width. */ borderLeftWidth?: ICSSRule | ICSSPixelUnitRule; /** * Defines how round the border's corners are. */ borderRadius?: ICSSRule | ICSSPixelUnitRule; /** * Shorthand property that defines the border-width, border-style and border-color of * an element's right border in a single declaration. Note that you can use the * corresponding longhand properties to set specific individual properties of the * right border — border-right-width, border-right-style and border-right-color. */ borderRight?: ICSSRule | ICSSPixelUnitRule; /** * Sets the color of an element's right border. This page explains the * border-right-color value, but often you will find it more convenient to fix the * border's right color as part of a shorthand set, either border-right or border-color. * Colors can be defined several ways. For more information, see Usage. */ borderRightColor?: ICSSRule | string; /** * Sets the style of an element's right border. To set all four borders, use the * shorthand property, border-style. Otherwise, you can set the borders individually * with border-top-style, border-right-style, border-bottom-style, border-left-style. */ borderRightStyle?: ICSSRule | string; /** * Sets the width of an element's right border. To set all four borders, use the * border-width shorthand property which sets the values simultaneously for * border-top-width, border-right-width, border-bottom-width, and border-left-width. */ borderRightWidth?: ICSSRule | ICSSPixelUnitRule; /** * Specifies the distance between the borders of adjacent cells. */ borderSpacing?: ICSSRule | string; /** * Sets the style of an element's four borders. This property can have from one to * four values. With only one value, the value will be applied to all four borders; * otherwise, this works as a shorthand property for each of border-top-style, * border-right-style, border-bottom-style, border-left-style, where each border * style may be assigned a separate value. */ borderStyle?: ICSSRule | string; /** * Shorthand property that defines the border-width, border-style and border-color of * an element's top border in a single declaration. Note that you can use the * corresponding longhand properties to set specific individual properties of the top * border — border-top-width, border-top-style and border-top-color. */ borderTop?: ICSSRule | ICSSPixelUnitRule; /** * Sets the color of an element's top border. This page explains the border-top-color * value, but often you will find it more convenient to fix the border's top color as * part of a shorthand set, either border-top or border-color. * Colors can be defined several ways. For more information, see Usage. */ borderTopColor?: ICSSRule | string; /** * Sets the rounding of the top-left corner of the element. */ borderTopLeftRadius?: ICSSRule | ICSSPixelUnitRule; /** * Sets the rounding of the top-right corner of the element. */ borderTopRightRadius?: ICSSRule | ICSSPixelUnitRule; /** * Sets the style of an element's top border. To set all four borders, use the * shorthand property, border-style. Otherwise, you can set the borders individually * with border-top-style, border-right-style, border-bottom-style, border-left-style. */ borderTopStyle?: ICSSRule | string; /** * Sets the width of an element's top border. To set all four borders, use the * border-width shorthand property which sets the values simultaneously for * border-top-width, border-right-width, border-bottom-width, and border-left-width. */ borderTopWidth?: ICSSRule | ICSSPixelUnitRule; /** * Sets the width of an element's four borders. This property can have from one to * four values. This is a shorthand property for setting values simultaneously for * border-top-width, border-right-width, border-bottom-width, and border-left-width. */ borderWidth?: ICSSRule | ICSSPixelUnitRule; /** * This property specifies how far an absolutely positioned box's bottom margin edge * is offset above the bottom edge of the box's containing block. For relatively * positioned boxes, the offset is with respect to the bottom edges of the box itself * (i.e., the box is given a position in the normal flow, then offset from that * position according to these properties). */ bottom?: ICSSRule | ICSSPixelUnitRule; /** * Breaks a box into fragments creating new borders, padding and repeating backgrounds * or lets it stay as a continuous box on a page break, column break, or, for inline * elements, at a line break. */ boxDecorationBreak?: ICSSRule | string; /** * Cast a drop shadow from the frame of almost any element. * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */ boxShadow?: ICSSRule | string; /** * The CSS box-sizing property is used to alter the default CSS box model used to * calculate width and height of the elements. */ boxSizing?: ICSSRule | 'border-box' | 'content-box' | string; /** * The CSS break-after property allows you to force a break on multi-column layouts. * More specifically, it allows you to force a break after an element. It allows you * to determine if a break should occur, and what type of break it should be. The * break-after CSS property describes how the page, column or region break behaves * after the generated box. If there is no generated box, the property is ignored. */ breakAfter?: ICSSRule | string; /** * Control page/column/region breaks that fall above a block of content */ breakBefore?: ICSSRule | string; /** * Control page/column/region breaks that fall within a block of content */ breakInside?: ICSSRule | string; /** * The clear CSS property specifies if an element can be positioned next to or must be * positioned below the floating elements that precede it in the markup. */ clear?: ICSSRule | string; /** * Clipping crops an graphic, so that only a portion of the graphic is rendered, or * filled. This clip-rule property, when used with the clip-path property, defines * which clip rule, or algorithm, to use when filling the different parts of a graphics. */ clipRule?: ICSSRule | string; /** * The color property sets the color of an element's foreground content (usually text), * accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a). */ color?: ICSSRule | string; /** * Describes the number of columns of the element. * See CSS 3 column-count property https://www.w3.org/TR/css3-multicol/#cc */ columnCount?: ICSSRule | number | 'auto' | string; /** * Specifies how to fill columns (balanced or sequential). */ columnFill?: ICSSRule | string; /** * The column-gap property controls the width of the gap between columns in multi-column * elements. */ columnGap?: ICSSRule | string; /** * Sets the width, style, and color of the rule between columns. */ columnRule?: ICSSRule | string; /** * Specifies the color of the rule between columns. */ columnRuleColor?: ICSSRule | string; /** * Specifies the width of the rule between columns. */ columnRuleWidth?: ICSSRule | ICSSPixelUnitRule; /** * The column-span CSS property makes it possible for an element to span across all * columns when its value is set to all. An element that spans more than one column * is called a spanning element. */ columnSpan?: ICSSRule | string; /** * Specifies the width of columns in multi-column elements. */ columnWidth?: ICSSRule | ICSSPixelUnitRule; /** * This property is a shorthand property for setting column-width and/or column-count. */ columns?: ICSSRule | string; /** * Content for pseudo selectors. */ content?: string; /** * The counter-increment property accepts one or more names of counters (identifiers), * each one optionally followed by an integer which specifies the value by which the * counter should be incremented (e.g. if the value is 2, the counter increases by 2 * each time it is invoked). */ counterIncrement?: ICSSRule | string; /** * The counter-reset property contains a list of one or more names of counters, each * one optionally followed by an integer (otherwise, the integer defaults to 0.) Each * time the given element is invoked, the counters specified by the property are set to the given integer. */ counterReset?: ICSSRule | string; /** * The cue property specifies sound files (known as an "auditory icon") to be played by * speech media agents before and after presenting an element's content; if only one * file is specified, it is played both before and after. The volume at which the * file(s) should be played, relative to the volume of the main element, may also be * specified. The icon files may also be set separately with the cue-before and * cue-after properties. */ cue?: ICSSRule | string; /** * The cue-after property specifies a sound file (known as an "auditory icon") to be * played by speech media agents after presenting an element's content; the volume at * which the file should be played may also be specified. The shorthand property cue * sets cue sounds for both before and after the element is presented. */ cueAfter?: ICSSRule | string; /** * Specifies the mouse cursor displayed when the mouse pointer is over an element. */ cursor?: ICSSRule | string; /** * The direction CSS property specifies the text direction/writing direction. The rtl * is used for Hebrew or Arabic text, the ltr is for other languages. */ direction?: ICSSRule | string; /** * This property specifies the type of rendering box used for an element. It is a * shorthand property for many other display properties. * W3: https://www.w3.org/TR/css-display-3/#the-display-properties * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display */ display?: ICSSRule | ICSSDisplayRule | string; /** * The ‘fill’ property paints the interior of the given graphical element. The area to * be painted consists of any areas inside the outline of the shape. To determine the * inside of the shape, all subpaths are considered, and the interior is determined * according to the rules associated with the current value of the ‘fill-rule’ * property. The zero-width geometric outline of a shape is included in the area to be * painted. */ fill?: ICSSRule | string; /** * SVG: Specifies the opacity of the color or the content the current object is filled * with. * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty */ fillOpacity?: ICSSRule | number; /** * The ‘fill-rule’ property indicates the algorithm which is to be used to determine * what parts of the canvas are included inside the shape. For a simple, * non-intersecting path, it is intuitively clear what region lies "inside"; however, * for a more complex path, such as a path that intersects itself or where one subpath * encloses another, the interpretation of "inside" is not so obvious. * The ‘fill-rule’ property provides two options for how the inside of a shape is * determined: */ fillRule?: ICSSRule | string; /** * Applies various image processing effects. This property is largely unsupported. See * Compatibility section for more information. */ filter?: ICSSRule | string; /** * Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. */ flex?: ICSSRule | string | number; /** * The flex-basis CSS property describes the initial main size of the flex item before * any free space is distributed according to the flex factors described in the flex * property (flex-grow and flex-shrink). */ flexBasis?: ICSSRule | string | number; /** * The flex-direction CSS property describes how flex items are placed in the flex * container, by setting the direction of the flex container's main axis. */ flexDirection?: ICSSRule | 'row' | 'row-reverse' | 'column' | 'column-reverse' | string; /** * The flex-flow CSS property defines the flex container's main and cross axis. It is * a shorthand property for the flex-direction and flex-wrap properties. */ flexFlow?: ICSSRule | string; /** * Specifies the flex grow factor of a flex item. * See CSS flex-grow property https://drafts.csswg.org/css-flexbox-1/#flex-grow-property */ flexGrow?: ICSSRule | number | string; /** * Specifies the flex shrink factor of a flex item. * See CSS flex-shrink property https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property */ flexShrink?: ICSSRule | number | string; /** * Specifies whether flex items are forced into a single line or can be wrapped onto * multiple lines. If wrapping is allowed, this property also enables you to control * the direction in which lines are stacked. * See CSS flex-wrap property https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property */ flexWrap?: ICSSRule | 'nowrap' | 'wrap' | 'wrap-reverse' | string; /** * Elements which have the style float are floated horizontally. These elements can * move as far to the left or right of the containing element. All elements after * the floating element will flow around it, but elements before the floating element * are not impacted. If several floating elements are placed after each other, they * will float next to each other as long as there is room. */ float?: ICSSRule | string; /** * Flows content from a named flow (specified by a corresponding flow-into) through * selected elements to form a dynamic chain of layout regions. */ flowFrom?: ICSSRule | string; /** * The property which allows authors to opt particular elements out of forced colors mode, * restoring full control over the colors to CSS. Currently it's only supported in Edge Chromium. */ forcedColorAdjust?: 'auto' | 'none' | string; /** * Lays out one or more grid items bound by 4 grid lines. Shorthand for setting * grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single * declaration. */ gridArea?: ICSSRule | string; /** * Specifies the size of an implicitly-created grid column track */ gridAutoColumns?: ICSSRule | string; /** * Controls how the auto-placement algorithm works, * specifying exactly how auto-placed items get flowed into the grid. */ gridAutoFlow?: ICSSRule | string; /** * Specifies the size of an implicitly-created grid column track */ gridAutoRows?: ICSSRule | string; /** * Controls a grid item's placement in a grid area, particularly grid position and a * grid span. Shorthand for setting grid-column-start and grid-column-end in a single * declaration. */ gridColumn?: ICSSRule | string; /** * Controls a grid item's placement in a grid area as well as grid position and a * grid span. The grid-column-end property (with grid-row-start, grid-row-end, and * grid-column-start) determines a grid item's placement by specifying the grid lines * of a grid item's grid area. */ gridColumnEnd?: ICSSRule | string; /** * Sets the size of the gap (gutter) between an element's columns */ gridColumnGap?: ICSSRule | string; /** * Determines a grid item's placement by specifying the starting grid lines of a grid * item's grid area . A grid item's placement in a grid area consists of a grid * position and a grid span. See also ( grid-row-start, grid-row-end, and * grid-column-end) */ gridColumnStart?: ICSSRule | string; /** * Specifies the gaps (gutters) between grid rows and columns. It is a shorthand * for grid-row-gap and grid-column-gap. */ gridGap?: ICSSRule | string; /** * Gets or sets a value that indicates which row an element within a Grid should * appear in. Shorthand for setting grid-row-start and grid-row-end in a single * declaration. */ gridRow?: ICSSRule | string; /** * Determines a grid item’s placement by specifying the block-end. A grid item's * placement in a grid area consists of a grid position and a grid span. The * grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end) * determines a grid item's placement by specifying the grid lines of a grid item's * grid area. */ gridRowEnd?: ICSSRule | string; /** * Sets the size of the gap (gutter) between an element's grid rows */ gridRowGap?: ICSSRule | string; /** * Specifies a grid item’s start position within the grid row by contributing a line, * a span, or nothing (automatic) to its grid placement, thereby specifying the * inline-start edge of its grid area */ gridRowStart?: ICSSRule | string; /** * Specifies a row position based upon an integer location, string value, or desired * row size. * css/properties/grid-row is used as short-hand for grid-row-position and * grid-row-position */ gridRowPosition?: ICSSRule | string; /** * Specifies named grid areas which are not associated with any particular grid item, * but can be referenced from the grid-placement properties. The syntax of the * grid-template-areas property also provides a visualization of the structure of the * grid, making the overall layout of the grid container easier to understand. */ gridTemplate?: ICSSRule | string; /** * Specifies named grid areas */ gridTemplateAreas?: ICSSRule | string; /** * Specifies (with grid-template-rows) the line names and track sizing functions of * the grid. Each sizing function can be specified as a length, a percentage of the * grid container’s size, a measurement of the contents occupying the column or row, * or a fraction of the free space in the grid. */ gridTemplateColumns?: ICSSRule | string; /** * Specifies (with grid-template-columns) the line names and track sizing functions of * the grid. Each sizing function can be specified as a length, a percentage of the * grid container’s size, a measurement of the contents occupying the column or row, * or a fraction of the free space in the grid. */ gridTemplateRows?: ICSSRule | string; /** * Sets the height of an element. The content area of the element height does not * include the padding, border, and margin of the element. */ height?: ICSSRule | ICSSPixelUnitRule; /** * Specifies the minimum number of characters in a hyphenated word */ hyphenateLimitChars?: ICSSRule | string; /** * Indicates the maximum number of successive hyphenated lines in an element. The * ‘no-limit’ value means that there is no limit. */ hyphenateLimitLines?: ICSSRule | string; /** * Specifies the maximum amount of trailing whitespace (before justification) that may * be left in a line before hyphenation is triggered to pull part of a word from the * next line back up into the current one. */ hyphenateLimitZone?: ICSSRule | string; /** * Specifies whether or not words in a sentence can be split by the use of a manual or * automatic hyphenation mechanism. */ hyphens?: ICSSRule | string; /** * Defines how the browser distributes space between and around flex items * along the main-axis of their container. * See CSS justify-content property * https://www.w3.org/TR/css-flexbox-1/#justify-content-property */ justifyContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | string; /** * Justifies the box (as the alignment subject) within its containing block (as the alignment container) * along the inline/row/main axis of the alignment container. * * See CSS jusitfy-self property * https://www.w3.org/TR/css-align-3/#propdef-justify-self */ justifySelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | 'left' | 'right' | 'safe left' | 'safe right' | 'unsafe left' | 'unsafe right' | string; /** * Sets the left position of an element relative to the nearest ancestor that is set * to position absolute, relative, or fixed. */ left?: ICSSRule | ICSSPixelUnitRule; /** * The letter-spacing CSS property specifies the spacing behavior between text * characters. */ letterSpacing?: ICSSRule | string; /** * Specifies the height of an inline block level element. * See CSS 2.1 line-height property https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height */ lineHeight?: ICSSRule | 'normal' | ICSSPixelUnitRule | ICSSPercentageRule; /** * Shorthand property that sets the list-style-type, list-style-position and * list-style-image properties in one declaration. */ listStyle?: ICSSRule | string; /** * This property sets the image that will be used as the list item marker. When the * image is available, it will replace the marker set with the 'list-style-type' * marker. That also means that if the image is not available, it will show the style * specified by list-style-property */ listStyleImage?: ICSSRule | string; /** * Specifies if the list-item markers should appear inside or outside the content flow. */ listStylePosition?: ICSSRule | string; /** * Specifies the type of list-item marker in a list. */ listStyleType?: ICSSRule | string; /** * The margin property is shorthand to allow you to set all four margins of an element * at once. Its equivalent longhand properties are margin-top, margin-right, * margin-bottom and margin-left. Negative values are also allowed. */ margin?: ICSSRule | ICSSPixelUnitRule; /** * margin-bottom sets the bottom margin of an element. */ marginBottom?: ICSSRule | ICSSPixelUnitRule; /** * margin-left sets the left margin of an element. */ marginLeft?: ICSSRule | ICSSPixelUnitRule; /** * margin-right sets the right margin of an element. */ marginRight?: ICSSRule | ICSSPixelUnitRule; /** * margin-top sets the top margin of an element. */ marginTop?: ICSSRule | ICSSPixelUnitRule; /** * The marquee-direction determines the initial direction in which the marquee content moves. */ marqueeDirection?: ICSSRule | string; /** * The 'marquee-style' property determines a marquee's scrolling behavior. */ marqueeStyle?: ICSSRule | string; /** * This property is shorthand for setting mask-image, mask-mode, mask-repeat, * mask-position, mask-clip, mask-origin, mask-composite and mask-size. Omitted * values are set to their original properties' initial values. */ mask?: ICSSRule | string; /** * This property is shorthand for setting mask-border-source, mask-border-slice, * mask-border-width, mask-border-outset, and mask-border-repeat. Omitted values * are set to their original properties' initial values. */ maskBorder?: ICSSRule | string; /** * This property specifies how the images for the sides and the middle part of the * mask image are scaled and tiled. The first keyword applies to the horizontal * sides, the second one applies to the vertical ones. If the second keyword is * absent, it is assumed to be the same as the first, similar to the CSS * border-image-repeat property. */ maskBorderRepeat?: ICSSRule | string; /** * This property specifies inward offsets from the top, right, bottom, and left * edges of the mask image, dividing it into nine regions: four corners, four * edges, and a middle. The middle image part is discarded and treated as fully * transparent black unless the fill keyword is present. The four values set the * top, right, bottom and left offsets in that order, similar to the CSS * border-image-slice property. */ maskBorderSlice?: ICSSRule | string; /** * Specifies an image to be used as a mask. An image that is empty, fails to * download, is non-existent, or cannot be displayed is ignored and does not mask * the element. */ maskBorderSource?: ICSSRule | string; /** * This property sets the width of the mask box image, similar to the CSS * border-image-width property. */ maskBorderWidth?: ICSSRule | ICSSPixelUnitRule; /** * Determines the mask painting area, which defines the area that is affected by * the mask. The painted content of an element may be restricted to this area. */ maskClip?: ICSSRule | string; /** * For elements rendered as a single box, specifies the mask positioning area. For * elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes * on several pages) specifies which boxes box-decoration-break operates on to * determine the mask positioning area(s). */ maskOrigin?: ICSSRule | string; /** * This property must not be used. It is no longer included in any standard or * standard track specification, nor is it implemented in any browser. It is only * used when the text-align-last property is set to size. It controls allowed * adjustments of font-size to fit line content. */ maxFontSize?: ICSSRule | ICSSPixelUnitRule; /** * Sets the maximum height for an element. It prevents the height of the element to * exceed the specified value. If min-height is specified and is greater than * max-height, max-height is overridden. */ maxHeight?: ICSSRule | ICSSPixelUnitRule; /** * Sets the maximum width for an element. It limits the width property to be larger * than the value specified in max-width. */ maxWidth?: ICSSRule | ICSSPixelUnitRule; /** * Sets the minimum height for an element. It prevents the height of the element to * be smaller than the specified value. The value of min-height overrides both * max-height and height. */ minHeight?: ICSSRule | ICSSPixelUnitRule; /** * Sets the minimum width of an element. It limits the width property to be not * smaller than the value specified in min-width. */ minWidth?: ICSSRule | ICSSPixelUnitRule; /** * The mix-blend-mode CSS property describes how an element's content should blend * with the content of the element's direct parent and the element's background. */ mixBlendMode?: ICSSRule | IMixBlendModes | string; /** * The ‘object-fit’ property specifies how the contents of a replaced element should * be fitted to the box established by its used height and width. * See CSS 3 object-fit property https://www.w3.org/TR/css3-images/#the-object-fit */ objectFit?: ICSSRule | 'cover' | 'contain' | 'fill' | 'none' | string; /** * Specifies the transparency of an element. * See CSS 3 opacity property https://drafts.csswg.org/css-color-3/#opacity */ opacity?: ICSSRule | number | string; /** * Specifies the order used to lay out flex items in their flex container. * Elements are laid out in the ascending order of the order value. * See CSS order property https://drafts.csswg.org/css-flexbox-1/#order-property */ order?: ICSSRule | number | string; /** * In paged media, this property defines the minimum number of lines in * a block container that must be left at the bottom of the page. * See CSS 3 orphans, widows properties https://drafts.csswg.org/css-break-3/#widows-orphans */ orphans?: ICSSRule | number | string; /** * The CSS outline property is a shorthand property for setting one or more of the * individual outline properties outline-style, outline-width and outline-color in a * single rule. In most cases the use of this shortcut is preferable and more * convenient. * Outlines differ from borders in the following ways: * • Outlines do not take up space, they are drawn above the content. * • Outlines may be non-rectangular. They are rectangular in * Gecko/Firefox. Internet Explorer attempts to place the smallest contiguous outline * around all elements or shapes that are indicated to have an outline. Opera draws a * non-rectangular shape around a construct. */ outline?: ICSSRule | 0 | string; /** * The outline-color property sets the color of the outline of an element. An * outline is a line that is drawn around elements, outside the border edge, to make * the element stand out. */ outlineColor?: ICSSRule | string; /** * The outline-offset property offsets the outline and draw it beyond the border edge. */ outlineOffset?: ICSSRule | string; /** * The overflow property controls how extra content exceeding the bounding box of an * element is rendered. It can be used in conjunction with an element that has a * fixed width and height, to eliminate text-induced page distortion. */ overflow?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible'; /** * Specifies the preferred scrolling methods for elements that overflow. */ overflowStyle?: ICSSRule | string; /** * Specifies whether or not the browser should insert line breaks within words to * prevent text from overflowing its content box. In contrast to word-break, * overflow-wrap will only create a break if an entire word cannot be placed on its * own line without overflowing. */ overflowWrap?: ICSSRule | 'normal' | 'break-word' | string; /** * Controls how extra content exceeding the x-axis of the bounding box of an element