IStyleset | Mimcss Reference

Properties

Optional accentColor

accentColor?: CssColor

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

Optional alignContent

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ alignContent: "stretch" })

    // Using custom property
    defaultAlignContent = this.$var( "alignContent", "first baseline")
    cls2 = this.$class({ alignContent: this.defaultAlignContent })

    // Using with "!important" flag
    cls3 = this.$class({ alignContent: {"!": "safe center"} })

    // Using with global values
    cls4 = this.$class({ alignContent: "initial" })
}

See Also:

Optional alignItems

alignItems?: AlignItemsKeywords

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ alignItems: "flex-start" })

    // Using custom property
    defaultAlignItems = this.$var( "alignItems", "first baseline")
    cls2 = this.$class({ alignItems: this.defaultAlignItems })

    // Using with "!important" flag
    cls3 = this.$class({ alignItems: {"!": "safe center"} })

    // Using with global values
    cls4 = this.$class({ alignItems: "initial" })
}

See Also:

Optional alignSelf

alignSelf?: AlignSelfKeywords

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ alignSelf: "self-start" })

    // Using custom property
    defaultAlignSelf = this.$var( "alignItems", "first baseline")
    cls2 = this.$class({ alignSelf: this.defaultAlignSelf })

    // Using with "!important" flag
    cls3 = this.$class({ alignSelf: {"!": "safe center"} })

    // Using with global values
    cls4 = this.$class({ alignSelf: "initial" })
}

See Also:

Optional alignmentBaseline

alignmentBaseline?: AlignmentBaselineKeywords

The alignment-baseline attribute 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.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ alignmentBaseline: "middle" })

    // Using custom property
    defaultAlignmentBaseline = this.$var( "alignmentBaseline", "mathematical")
    cls2 = this.$class({ alignmentBaseline: this.defaultAlignmentBaseline })

    // Using with "!important" flag
    cls3 = this.$class({ alignmentBaseline: {"!": "after-edge"} })

    // Using with global values
    cls4 = this.$class({ alignmentBaseline: "initial" })
}

See Also:

MDN Page

Optional all

all?: Global_StyleType

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all

Optional animation

animation?: Animation_StyleType

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animationName, animationDuration, animationTimingFunction, animationDelay, animationIterationCount, animationDirection, animationFillMode, and animationPlayState.

The values for this property can be either a string or an object of type Animation_Single or an array of either strings or Animation_Single objects.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string
    cls1 = this.$class({ animation: ".5s linear 1s infinite alternate slidein" })

    // Using Animation_Single object
    cls2 = this.$class({ animation: {
        name: "slidein",
        duration: 0.5,
        func: "linear",
        delay: 1000,
        count: "infinite",
        direction: "alternate"
    }})

    // Animation name can point to a keyframes rule
    rotate360 = this.$keframes({
        "from": { transform: css.rotate(0) }
        "to": { transform: css.rotate(360) }
    })
    cls2 = this.$class({ animation: {
        name: this.rotate360,
        duration: 2000,
        func: "linear",
        delay: 1000,
        count: "infinite",
        direction: "alternate"
    }})

    // Using array to specify multiple animations
    cls4 = this.$class({ animation: [
        ".5s linear 1s infinite alternate slidein",
        {
            name: this.rotate360,
            duration: 2000,
            func: "linear",
            delay: 1000,
            count: "infinite",
            direction: "alternate"
        }
    ]})

    // Every animation property can be specified using a custom property
    varName = this.$var( "animationName", this.rotate360)
    varDuration = this.$var( "animationDuration", 2000)
    varFunc = this.$var( "animationTimingFunction", "linear")
    varDelay = this.$var( "animationDelay", 1000)
    varCount = this.$var( "animationIterationCount", "infinite")
    varDirection = this.$var( "animationDirection", "alternate)
    cls5 = this.$class({ animation: {
        name: this.varName,
        duration:  this.varDuration,
        func:  this.varFunc,
        delay:  this.varDelay,
        count:  this.varCount,
        direction:  this.varDirection
    }})
}

See Also:

Optional animationDelay

animationDelay?: OneOrMany<CssTime>

The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

In Mimcss, the type of this property is CssTime. Integer numbers are treated as time in milliseconds; floating point numbers are treated as time in seconds.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using floating point number to indicate seconds: 5s
    cls1 = this.$class({ animationDelay: 0.5 })

    // Using integer number to indicate milliseconds: 300s
    cls2 = this.$class({ animationDelay: 300 })

    // Using time-unit function: 3s
    cls3 = this.$class({ animationDelay: css.s(3) })

    // Using time-unit function: -500ms
    cls4 = this.$class({ animationDelay: css.ms(-500) })

    // Using custom property
    varDelay = this.$var( "animationDelay", 1000)
    cls5 = this.$class({ animationDelay: this.varDelay }})

    // Using min() CSS function
    cls6 = this.$class({ animationDelay: css.Time.min( 2000, this.varDelay) })

    // Multiple values
    cls7 = this.$class({ animationDelay: [0.5, -300, this.varDelay] })
}

See Also:

Optional animationDirection

animationDirection?: OneOrMany<AnimationDirectionKeywords>

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ animationDirection: "reverse" })

    // Using custom property
    varDirection = this.$var( "animationDirection", "normal")
    cls2 = this.$class({ animationDirection: this.varDirection })

    // Using with "!important" flag
    cls3 = this.$class({ animationDirection: {"!": "alternate"} })

    // Using with global values
    cls4 = this.$class({ animationDirection: "initial" })

    // Multiple values
    cls5 = this.$class({ animationDirection: ["normal", "alternate", this.varDirection] })
}

See Also:

Optional animationDuration

animationDuration?: OneOrMany<CssTime>

The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.

In Mimcss, the type of this property is CssTime. Integer numbers are treated as time in milliseconds; floating point numbers are treated as time in seconds.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using floating point number to indicate seconds: 5s
    cls1 = this.$class({ animationDuration: 0.5 })

    // Using integer number to indicate milliseconds: 300s
    cls2 = this.$class({ animationDuration: 300 })

    // Using time-unit function: 3s
    cls3 = this.$class({ animationDuration: css.s(3) })

    // Using time-unit function: -500ms
    cls4 = this.$class({ animationDuration: css.ms(-500) })

    // Using custom property
    varDuration = this.$var( "animationDuration", 1000)
    cls5 = this.$class({ animationDuration: this.varDuration }})

    // Using min() CSS function
    cls6 = this.$class({ animationDuration: css.Time.min( 2000, this.varDuration) })

    // Multiple values
    cls7 = this.$class({ animationDuration: [0.5, -300, this.varDuration] })
}

See Also:

Optional animationFillMode

animationFillMode?: OneOrMany<AnimationFillModeKeywords>

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ animationFillMode: "forwards" })

    // Using custom property
    varMode = this.$var( "animationFillMode", "none")
    cls2 = this.$class({ animationFillMode: this.varMode })

    // Using with "!important" flag
    cls3 = this.$class({ animationFillMode: {"!": "backwards"} })

    // Using with global values
    cls4 = this.$class({ animationFillMode: "initial" })

    // Multiple values
    cls5 = this.$class({ animationFillMode: ["forwards", "both", this.varMode] })
}

See Also:

Optional animationIterationCount

animationIterationCount?: OneOrMany<AnimationIterationCount_Single>

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ animationIterationCount: "infinite" })

    // Using number
    cls2 = this.$class({ animationIterationCount: 2 })

    // Using custom property
    varCount = this.$var( "animationIterationCount", "1")
    cls3 = this.$class({ animationIterationCount: this.varCount })

    // Using with "!important" flag
    cls4 = this.$class({ animationIterationCount: {"!": 3} })

    // Using with global values
    cls5 = this.$class({ animationIterationCount: "initial" })

    // Multiple values
    cls6 = this.$class({ animationIterationCount: ["infinite", 3, this.varCount] })
}

See Also:

Optional animationName

animationName?: OneOrMany<AnimationName_Single>

The animation-name CSS property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.

In Mimcss, instead of specifying the name of the @keyframes rule, you can specify the @keyframes rule object itself.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Defining a `@keyframes` rule and using it in the `animation-name` style property
    move = this.$keyframes([
        ["from", {transform: translate(0)}],
        ["to", {transform: translate(50,50)}]
    ])
    cls1 = this.$class({ animationName: this.move })

    // Using string literal to reference a `@keyframes` rule defined without Mimcss
    cls2 = this.$class({ animationName: "slidein" })

    // Using custom property
    varName = this.$var( "animationName", this.move)
    cls3 = this.$class({ animationName: this.varName })

    // Multiple values
    cls4 = this.$class({ animationName: [this.move, "slidein", this.varName] })
}

Note that although a @keyframes rules defined using Mimcss have the name property, this property cannot be used in the same Style Definition class where the @keyframes rule is defined. That is, the following code will not work:

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    move = this.$keyframes([
        ["from", {transform: translate(0)}],
        ["to", {transform: translate(50,50)}]
    ])

    // !!!!! WILL NOT WORK
    cls1 = this.$class({ animationName: this.move.name })

    // This will work
    cls2 = this.$class({ animationName: this.move })
}

This limitation exists because by the time the name property is accessed (that is, during the style definition class construction), it has not been assigned yet.

See Also:

Optional animationPlayState

animationPlayState?: OneOrMany<AnimationPlayStateKeywords>

The animation-play-state CSS property sets whether an animation is running or paused.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ animationPlayState: "paused" })

    // Using custom property
    varState = this.$var( "animationPlayState", "running")
    cls2 = this.$class({ animationPlayState: this.varState })

    // Using with "!important" flag
    cls3 = this.$class({ animationPlayState: {"!": "paused"} })

    // Using with global values
    cls4 = this.$class({ animationPlayState: "initial" })

    // Multiple values
    cls5 = this.$class({ animationPlayState: ["paused", "running", this.varState] })
}

See Also:

Optional animationTimingFunction

animationTimingFunction?: OneOrMany<TimingFunction>

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ animationTimingFunction: "ease-in-out" })

    // Using `steps()` function
    cls2 = this.$class({ animationTimingFunction: css.steps(4, "jump-start") })

    // Using `cubic-bezier()` function
    cls3 = this.$class({ animationTimingFunction: css.cubicBezier(0.1, 0.7, 1.0, 0.1) })

    // Using custom property
    varFunc = this.$var( "animationTimingFunction", css.steps(6, "start"))
    cls4 = this.$class({ animationTimingFunction: this.varFunc })

    // Using with global values
    cls5 = this.$class({ animationTimingFunction: "initial" })

    // Multiple values
    cls6 = this.$class({ animationTimingFunction: ["ease-in-out", css.cubic-bezier(0.1, 0.7, 1.0, 0.1), this.varFunc] })
}

See Also:

Optional appearance

appearance?: string

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme.

In Mimcss, the appearance property has the type of string and thus accepts any string value. Although the latest standard only lists several string literals as possible values, the browser vendors used to support numerous other string literals. In order to allow all thee values to be specified, Mimcss decided to use the string type. Note, however, that this disables any compile-time checking so you should be extra cautious when assigning values to this property.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ appearance: "none" })

    // Using custom property
    varAppearance = this.$var( "appearance", "auto")
    cls2 = this.$class({ appearance: this.varAppearance })

    // Using with "!important" flag
    cls3 = this.$class({ appearance: {"!": "textfield"} })

    // Using with global values
    cls4 = this.$class({ appearance: "initial" })
}

See Also:

Optional aspectRatio

aspectRatio?: AspectRatio_StyleType

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Example

import * as css from "mimcss"

class MyStyles extends css.StyleDefinition
{
    // Using string literal
    cls1 = this.$class({ aspectRatio: "4/3" })

    // using the `ratio()` function
    cls2 = this.$class({ aspectRatio: css.ratio( 16, 9)})

    // using a single number
    cls4 = this.$media({ aspectRatio: 1.33 }, ...)

    // Using custom property
    varRatio = this.$var( "aspectRatio", "185/100")
    cls5 = this.$class({ aspectRatio: this.varRatio })

    // Using with "!important" flag
    cls6 = this.$class({ aspectRatio: {"!": 1} })

    // Using with global values
    cls7 = this.$class({ aspectRatio: "initial" })
}