Browse Source

Use max/minWidth/Height call in samples

891_NO_COLOR_STRING_SIGNATURES v0.5.0-build253
Shagen Ogandzhanian 3 years ago
parent
commit
fb63c43394
  1. 5
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  2. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
  3. 16
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt
  4. 8
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt

5
web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@ -26,7 +26,7 @@ object AppCSSVariables : CSSVariables {
object AppStylesheet : StyleSheet() {
val composeLogo by style {
property("max-width", 100.percent)
maxWidth(100.percent)
}
val composeTitleTag by style {
@ -85,8 +85,7 @@ object AppStylesheet : StyleSheet() {
"flex-basis",
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
)
property(
"max-width",
maxWidth(
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
)
property("box-sizing", "border-box")

6
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt

@ -7,7 +7,7 @@ object WtCards : StyleSheet(AppStylesheet) {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
border(1.px, LineStyle.Solid)
property("min-height", 0)
minHeight(0.px)
property("box-sizing", "border-box")
}
@ -27,7 +27,7 @@ object WtCards : StyleSheet(AppStylesheet) {
position(Position.Relative)
property("overflow", "auto")
property("flex", "1 1 auto")
property("min-height", 0)
minHeight(0.px)
property("box-sizing", "border-box")
property("padding", "24px 32px")
@ -44,6 +44,6 @@ object WtCards : StyleSheet(AppStylesheet) {
val wtVerticalFlexGrow by style {
flexGrow(1)
property("max-width", 100.percent)
maxWidth(100.percent)
}
}

16
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt

@ -1,14 +1,6 @@
package com.sample.style
import org.jetbrains.compose.web.css.CSSBuilder
import org.jetbrains.compose.web.css.CSSUnitValue
import org.jetbrains.compose.web.css.GenericStyleSheetBuilder
import org.jetbrains.compose.web.css.StyleSheet
import org.jetbrains.compose.web.css.flexGrow
import org.jetbrains.compose.web.css.mediaMaxWidth
import org.jetbrains.compose.web.css.media
import org.jetbrains.compose.web.css.percent
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
@ -118,19 +110,19 @@ object WtCols : StyleSheet(AppStylesheet) {
forMaxWidth(640.px) {
AppCSSVariables.wtColCount(0)
flexGrow(1)
property("max-width", 100.percent)
maxWidth(100.percent)
}
}
val wtColAutoFill by style {
AppCSSVariables.wtColCount(0)
flexGrow(1)
property("max-width", 100.percent)
maxWidth(100.percent)
}
val wtColInline by style {
AppCSSVariables.wtColCount(0)
property("max-width", 100.percent)
maxWidth(100.percent)
property("flex-basis", "auto")
}
}

8
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt

@ -9,11 +9,11 @@ object WtContainer : StyleSheet(AppStylesheet) {
property("box-sizing", "border-box")
property("padding-left", 22.px)
property("padding-right", 22.px)
property("max-width", 1276.px)
maxWidth(1276.px)
media(mediaMaxWidth(640.px)) {
self style {
property("max-width", 100.percent)
maxWidth(100.percent)
property("padding-left", 16.px)
property("padding-right", 16.px)
}
@ -21,7 +21,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
media(mediaMaxWidth(1276.px)) {
self style {
property("max-width", 996.px)
maxWidth(996.px)
property("padding-left", 996.px)
property("padding-right", 22.px)
}
@ -29,7 +29,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
media(mediaMaxWidth(1000.px)) {
self style {
property("max-width", 100.percent)
maxWidth(100.percent)
property("padding-left", 22.px)
property("padding-right", 22.px)
}

Loading…
Cancel
Save