Use max/minWidth/Height call in samples

JetBrains · Jul 19, 2021 · fb63c43 · fb63c43
1 parent 83870dd
commit fb63c43
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 22 deletions.
diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/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")

diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt b/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)
     }
 }
diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt b/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")
     }
 }
diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt
@@ -9,27 +9,27 @@ 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)
             }
         }
 
         media(mediaMaxWidth(1276.px)) {
             self style {
-                property("max-width", 996.px)
+                maxWidth(996.px)
                 property("padding-left", 996.px)
                 property("padding-right", 22.px)
             }
         }
 
         media(mediaMaxWidth(1000.px)) {
             self style {
-                property("max-width", 100.percent)
+                maxWidth(100.percent)
                 property("padding-left", 22.px)
                 property("padding-right", 22.px)
             }