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() { object AppStylesheet : StyleSheet() {
val composeLogo by style { val composeLogo by style {
property("max-width", 100.percent) maxWidth(100.percent)
} }
val composeTitleTag by style { val composeTitleTag by style {
@ -85,8 +85,7 @@ object AppStylesheet : StyleSheet() {
"flex-basis", "flex-basis",
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
) )
property( maxWidth(
"max-width",
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
) )
property("box-sizing", "border-box") 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) display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column) flexDirection(FlexDirection.Column)
border(1.px, LineStyle.Solid) border(1.px, LineStyle.Solid)
property("min-height", 0) minHeight(0.px)
property("box-sizing", "border-box") property("box-sizing", "border-box")
} }
@ -27,7 +27,7 @@ object WtCards : StyleSheet(AppStylesheet) {
position(Position.Relative) position(Position.Relative)
property("overflow", "auto") property("overflow", "auto")
property("flex", "1 1 auto") property("flex", "1 1 auto")
property("min-height", 0) minHeight(0.px)
property("box-sizing", "border-box") property("box-sizing", "border-box")
property("padding", "24px 32px") property("padding", "24px 32px")
@ -44,6 +44,6 @@ object WtCards : StyleSheet(AppStylesheet) {
val wtVerticalFlexGrow by style { val wtVerticalFlexGrow by style {
flexGrow(1) 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 package com.sample.style
import org.jetbrains.compose.web.css.CSSBuilder import org.jetbrains.compose.web.css.*
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.selectors.CSSSelector import org.jetbrains.compose.web.css.selectors.CSSSelector
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth( fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
@ -118,19 +110,19 @@ object WtCols : StyleSheet(AppStylesheet) {
forMaxWidth(640.px) { forMaxWidth(640.px) {
AppCSSVariables.wtColCount(0) AppCSSVariables.wtColCount(0)
flexGrow(1) flexGrow(1)
property("max-width", 100.percent) maxWidth(100.percent)
} }
} }
val wtColAutoFill by style { val wtColAutoFill by style {
AppCSSVariables.wtColCount(0) AppCSSVariables.wtColCount(0)
flexGrow(1) flexGrow(1)
property("max-width", 100.percent) maxWidth(100.percent)
} }
val wtColInline by style { val wtColInline by style {
AppCSSVariables.wtColCount(0) AppCSSVariables.wtColCount(0)
property("max-width", 100.percent) maxWidth(100.percent)
property("flex-basis", "auto") 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("box-sizing", "border-box")
property("padding-left", 22.px) property("padding-left", 22.px)
property("padding-right", 22.px) property("padding-right", 22.px)
property("max-width", 1276.px) maxWidth(1276.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
property("max-width", 100.percent) maxWidth(100.percent)
property("padding-left", 16.px) property("padding-left", 16.px)
property("padding-right", 16.px) property("padding-right", 16.px)
} }
@ -21,7 +21,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
media(mediaMaxWidth(1276.px)) { media(mediaMaxWidth(1276.px)) {
self style { self style {
property("max-width", 996.px) maxWidth(996.px)
property("padding-left", 996.px) property("padding-left", 996.px)
property("padding-right", 22.px) property("padding-right", 22.px)
} }
@ -29,7 +29,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
media(mediaMaxWidth(1000.px)) { media(mediaMaxWidth(1000.px)) {
self style { self style {
property("max-width", 100.percent) maxWidth(100.percent)
property("padding-left", 22.px) property("padding-left", 22.px)
property("padding-right", 22.px) property("padding-right", 22.px)
} }

Loading…
Cancel
Save