Allows having CSS variables and constants that accept value of any type
Allows having CSS variables and constants that accept an <angle> CSS value
Allows having CSS variables and constants that accept a "ratio" CSS value
Allows having CSS variables and constants that accept a <color> CSS value
Allows having CSS variables and constants that accept a <custom-ident> value
Allows having CSS variables and constants that accept a "frequency" CSS value
Allows having CSS variables and constants that accept an <image> CSS value
Allows having CSS variables and constants that accept a <length-percentage> CSS value
Allows having CSS variables and constants that accept a <length> CSS value
Allows having CSS variables and constants that accept multiple "multi-position" CSS values
Allows having CSS variables and constants that accept a <number> CSS value
Allows having CSS variables and constants that accept a <percent> CSS value
Allows having CSS variables and constants that accept a "point" value
Allows having CSS variables and constants that accept a "position" CSS value
Allows having CSS variables and constants that accept a "radius" CSS value
Allows having CSS variables and constants that accept a <resolution> CSS value
Allows having CSS variables and constants that accept a "size" value
Allows having CSS variables and constants that accept a "string" value
Allows having CSS variables and constants that accept a <time> CSS value
Allows having CSS variables and constants that accept a <transform-function> value
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Allows having CSS variables and constants that accept value of any type
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:
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" })
}
See Also:
The
IVarTemplateStylesetinterface maps template names to the types, which can be used for defining custom CSS properties (a.k.a. variables). Normally, variables are defined using the names of the style properties and their type is determined by the type of this property in the IStyleset interface. Sometimes, however, there is a need to define variables of some other types, for which there is no suitable style property. TheIVarTemplateStylesetinterface provides many basic types and it can also be extended using the TypeScript's module augmentation.