diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt index bb1cc06..f8e60ed 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt @@ -2,6 +2,7 @@ package nl.astraeus.css.style import nl.astraeus.css.properties.* import nl.astraeus.logging.log +import kotlin.time.Duration typealias Css = Style.() -> Unit @@ -364,6 +365,34 @@ open class Style( fun all(all: All) { properties["all"] = toProp(all) } fun alignSelf(alignSelf: AlignSelf) { properties["align-self"] = toProp(alignSelf) } fun animation(text: String) { properties["animation"] = listOf(CssProperty(text)) } + fun animationDelay(delay: DelayDuration) { properties["animation-delay"] = listOf(delay) } + fun animationDirection(direction: AnimationDirection) { properties["animation-direction"] = listOf(direction) } + fun animationDuration(duration: DelayDuration) { properties["animation-duration"] = listOf(duration) } + fun animationFillMode(fillMode: AnimationFillMode) { properties["animation-fill-mode"] = listOf(fillMode) } + fun animationIterationMode(vararg iterationMode: Count) { properties["animation-iteration-mode"] = iterationMode.toList() } + fun animationFrame(frame: AnimationFrame) { properties["animation-frame"] = listOf(frame) } + fun animationName(vararg name: String) { properties["animation-name"] = name.toList().map { an -> CssProperty(an) } } + fun animationPlayState(vararg state : AnimationPlayState) { + properties["animation-play-state"] = state.toList() + } + fun animationTimingFunction(vararg timingFunction: AnimationTimingFunction) { + properties["animation-timing-function"] = timingFunction.toList() + } + + + /* + + "animation-delay" to animationDelay, + "animation-direction" to animationDirection, + "animation-duration" to animationDuration, + "animation-fill-mode" to animationFillMode, + "animation-iteration-count" to animationIterationCount, + "animation-frame" to animationFrame, + "animation-name" to animationName, + "animation-play-state" to animationPlayState, + "animation-timing-function" to animationTimingFunction, + */ + fun color(color: Color) { properties["color"] = listOf(color) } fun backgroundColor(color: Color) { properties["background-color"] = listOf(color) } fun borderRadius(radius: Measurement) { properties["border-radius"] = listOf(radius) } fun borderRadius( diff --git a/src/jsMain/kotlin/nl/astraeus/css/Test.kt b/src/jsMain/kotlin/nl/astraeus/css/Test.kt index 08419fa..f494833 100644 --- a/src/jsMain/kotlin/nl/astraeus/css/Test.kt +++ b/src/jsMain/kotlin/nl/astraeus/css/Test.kt @@ -1,6 +1,7 @@ package nl.astraeus.css import nl.astraeus.css.properties.* +import nl.astraeus.css.properties.Color.Companion.hex import nl.astraeus.css.properties.Measurement.Companion.em import nl.astraeus.css.properties.Measurement.Companion.px import nl.astraeus.css.style.Style @@ -32,14 +33,14 @@ private fun generateCss( select("body") { // fontFamily = base.mainFont // color = base.mainColor -// backgroundColor = base.mainBackgroundColor + backgroundColor(base.mainBackgroundColor) // alignContent = AlignContent.initial() } select(".test") { // top = px(10) // left = em(5) -// backgroundColor = Color.rgba(255, 255, 255, 0.75) + backgroundColor(Color.rgba(255, 255, 255, 0.75)) // // select("> a") { // color = Color.hsl(200, 50, 50) @@ -48,11 +49,12 @@ private fun generateCss( select("nav") { select("ul") { -// color = Color.hsl(0, 100, 25) -// backgroundColor = base.mainBackgroundColor + color(Color.hsl(0, 100, 25)) + backgroundColor(base.mainBackgroundColor) } select("li") { sizePX(25, 25, 200, 200) + animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running()) select("a") { // width = px(725) @@ -79,6 +81,8 @@ fun main() { val sd = style { select("#pipo") { + backgroundColor(hex("ffeedd")) + fontFamily("Arial, Courier") // backgroundColor = Color.hex("eeeeee") // fontFamily = text("Arial, Courier") // animationDelay = listOf(DelayDuration.initial()) diff --git a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt index f51b315..03a9404 100644 --- a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt +++ b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt @@ -147,6 +147,7 @@ fun main() { select("border-2") { // borderRadius = BorderRadius(4, 5, 6, 7) apply(border2) + animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running()) // display = Display.none() // borderBottomWidth = BorderWidth.perc(13)