Browse Source

Update web_landing sample and web_langin example with fresher CSS API

pull/966/head
Shagen Ogandzhanian 3 years ago
parent
commit
9654149ec7
  1. 1
      examples/web_landing/build.gradle.kts
  2. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
  3. 3
      examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
  4. 8
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
  5. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  6. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt
  7. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
  8. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  9. 18
      examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  10. 16
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
  11. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
  12. 26
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
  13. 2
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
  14. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
  15. 78
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt
  16. 6
      web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
  17. 3
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
  18. 8
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
  19. 6
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  20. 6
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt
  21. 4
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
  22. 4
      web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  23. 18
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  24. 16
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
  25. 6
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
  26. 26
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
  27. 2
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
  28. 6
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
  29. 78
      web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt

1
examples/web_landing/build.gradle.kts

@ -26,3 +26,4 @@ kotlin {
} }
} }
} }

6
examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt

@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) {
flexDirection(FlexDirection.Column) flexDirection(FlexDirection.Column)
height(100.percent) height(100.percent)
margin(0.px) margin(0.px)
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
content() content()
@ -28,8 +28,8 @@ fun Layout(content: @Composable () -> Unit) {
fun MainContentLayout(content: @Composable () -> Unit) { fun MainContentLayout(content: @Composable () -> Unit) {
Main({ Main({
style { style {
property("flex", "1 0 auto") flex("1 0 auto")
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
content() content()

3
examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt

@ -8,6 +8,7 @@ import com.sample.components.Card
import com.sample.components.ContainerInSection import com.sample.components.ContainerInSection
import com.sample.components.LinkOnCard import com.sample.components.LinkOnCard
import com.sample.style.* import com.sample.style.*
import org.jetbrains.compose.web.css.paddingTop
data class CardWithListPresentation( data class CardWithListPresentation(
val title: String, val title: String,
@ -87,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) {
card.list.forEachIndexed { _, it -> card.list.forEachIndexed { _, it ->
Li({ Li({
style { style {
property("padding-top", 24.px) paddingTop(24.px)
} }
}) { Text(it) } }) { Text(it) }
} }

8
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@ -32,11 +32,11 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
descendant(self, CSSSelector.Type("label")) style { descendant(self, CSSSelector.Type("label")) style {
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("width", SwitcherVariables.labelWidth.value(56.px)) width(SwitcherVariables.labelWidth.value(56.px))
property("padding", SwitcherVariables.labelPadding.value(10.px)) padding(SwitcherVariables.labelPadding.value(10.px))
property("transition", "all 0.3s") property("transition", "all 0.3s")
property("text-align", "center") textAlign("center")
property("box-sizing", "border-box") boxSizing("border-box")
border { border {
style(LineStyle.Solid) style(LineStyle.Solid)

6
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@ -238,7 +238,7 @@ private fun TitledCodeSample(title: String, code: String) {
style { style {
backgroundColor(rgba(39, 40, 44, 0.05)) backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px) borderRadius(8.px, 8.px, 8.px)
property("padding", "12px 16px") padding(12.px, 16.px)
} }
}) { }) {
FormattedCodeSnippet(code = code) FormattedCodeSnippet(code = code)
@ -249,8 +249,8 @@ private fun TitledCodeSample(title: String, code: String) {
fun FormattedCodeSnippet(code: String, language: String = "kotlin") { fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
Pre({ Pre({
style { style {
property("max-height", 25.em) maxHeight(25.em)
property("overflow", "auto") overflow("auto")
height(auto) height(auto)
} }
}) { }) {

6
examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt

@ -13,13 +13,13 @@ fun PageFooter() {
Footer({ Footer({
style { style {
flexShrink(0) flexShrink(0)
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
Section({ Section({
classes(WtSections.wtSectionBgGrayDark) classes(WtSections.wtSectionBgGrayDark)
style { style {
property("padding", "24px 0") padding(24.px, 0.px)
} }
}) { }) {
Div({ classes(WtContainer.wtContainer) }) { Div({ classes(WtContainer.wtContainer) }) {
@ -61,7 +61,7 @@ private fun CopyrightInFooter() {
style { style {
justifyContent(JustifyContent.SpaceEvenly) justifyContent(JustifyContent.SpaceEvenly)
flexWrap(FlexWrap.Wrap) flexWrap(FlexWrap.Wrap)
property("padding", "0px 12px") padding(0.px, 12.px)
} }
}) { }) {
Span({ Span({

4
examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt

@ -50,8 +50,8 @@ private fun LanguageButton() {
onClick { window.alert("Oops! This feature is yet to be implemented") } onClick { window.alert("Oops! This feature is yet to be implemented") }
}) { }) {
Img(src = "ic_lang.svg", attrs = { style { Img(src = "ic_lang.svg", attrs = { style {
property("padding-left", 8.px) paddingLeft(8.px)
property("padding-right", 8.px) paddingRight(8.px)
}}) }})
Text("English") Text("English")
} }

4
examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt

@ -40,7 +40,7 @@ fun Intro() {
classes(WtTexts.wtHero) classes(WtTexts.wtHero)
style { style {
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("white-space", "nowrap") whiteSpace("nowrap")
} }
}) { }) {
Text("Web") Text("Web")
@ -170,7 +170,7 @@ private fun IntroCodeSampleResult() {
Span({ Span({
classes(WtTexts.wtText2) classes(WtTexts.wtText2)
style { style {
property("margin-right", 8.px) marginRight(8.px)
} }
}) { }) {
Text("Result:") Text("Result:")

18
examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@ -26,21 +26,21 @@ object AppCSSVariables {
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 {
property("padding", "5px 12px") padding(5.px, 12.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 24.px) lineHeight(24.px)
position(Position.Relative) position(Position.Relative)
top((-32).px) top((-32).px)
marginLeft(8.px) marginLeft(8.px)
fontSize(15.px) fontSize(15.px)
backgroundColor(rgba(39, 40, 44, .05)) backgroundColor(rgba(39, 40, 44, .05))
color(rgba(39,40,44,.7)) color(rgba(39, 40, 44, .7))
borderRadius(4.px, 4.px, 4.px) borderRadius(4.px, 4.px, 4.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() {
value = "wtCol", value = "wtCol",
operator = CSSSelector.Attribute.Operator.Contains operator = CSSSelector.Attribute.Operator.Contains
) style { ) style {
property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value()) marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value()) marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())
property( property(
"flex-basis", "flex-basis",
@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() {
"max-width", "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") boxSizing("border-box")
} }
} }
} }

16
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt

@ -7,8 +7,8 @@ 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") boxSizing("border-box")
} }
val wtCardThemeLight by style { val wtCardThemeLight by style {
@ -25,11 +25,11 @@ object WtCards : StyleSheet(AppStylesheet) {
val wtCardSection by style { val wtCardSection by style {
position(Position.Relative) position(Position.Relative)
property("overflow", "auto") overflow("auto")
property("flex", "1 1 auto") flex( "1 1 auto")
property("min-height", 0) minHeight( 0.px)
property("box-sizing", "border-box") boxSizing("border-box")
property("padding", "24px 32px") padding(24.px, 32.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { padding(16.px) } self style { padding(16.px) }
@ -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)
} }
} }

6
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt

@ -119,19 +119,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")
} }
} }

26
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt

@ -6,32 +6,32 @@ object WtContainer : StyleSheet(AppStylesheet) {
val wtContainer by style { val wtContainer by style {
property("margin-left", "auto") property("margin-left", "auto")
property("margin-right", "auto") property("margin-right", "auto")
property("box-sizing", "border-box") boxSizing("border-box")
property("padding-left", 22.px) paddingLeft(22.px)
property("padding-right", 22.px) paddingRight(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) paddingLeft(6.px)
property("padding-right", 16.px) paddingRight(16.px)
} }
} }
media(mediaMaxWidth(1276.px)) { media(mediaMaxWidth(1276.px)) {
self style { self style {
property("max-width", 996.px) maxWidth(996.px)
property("padding-left", 22.px) paddingLeft(2.px)
property("padding-right", 22.px) paddingRight(22.px)
} }
} }
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) paddingLeft(2.px)
property("padding-right", 22.px) paddingRight(22.px)
} }
} }
} }

2
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt

@ -17,7 +17,7 @@ object WtRows : StyleSheet(AppStylesheet) {
"margin-left", "margin-left",
"calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})"
) )
property("box-sizing", "border-box") boxSizing("border-box")
} }
val wtRowSizeM by style { val wtRowSizeM by style {

6
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt

@ -5,9 +5,9 @@ import org.jetbrains.compose.web.css.*
object WtSections : StyleSheet(AppStylesheet) { object WtSections : StyleSheet(AppStylesheet) {
val wtSection by style { val wtSection by style {
property("box-sizing", "border-box") boxSizing("border-box")
property("padding-bottom", 96.px) paddingBottom(96.px)
property("padding-top", 1.px) paddingTop(1.px)
property( property(
propertyName = "padding-bottom", propertyName = "padding-bottom",
value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})"

78
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt

@ -8,11 +8,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtHero by style { val wtHero by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(60.px) fontSize(60.px)
property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) fontSize(AppCSSVariables.wtHeroFontSize.value(60.px))
property("letter-spacing", (-1.5).px) letterSpacing((-1.5).px)
property("font-weight", 900) fontWeight(900)
property("line-height", 64.px) lineHeight(64.px)
property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) lineHeight(AppCSSVariables.wtHeroLineHeight.value(64.px))
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -30,11 +30,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtSubtitle2 by style { val wtSubtitle2 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(28.px) fontSize(28.px)
property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) fontSize(AppCSSVariables.wtSubtitle2FontSize.value(28.px))
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 300) fontWeight(300)
property("line-height", 40.px) lineHeight(40.px)
property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) lineHeight(AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -52,9 +52,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText1 by style { val wtText1 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(18.px) fontSize(18.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 28.px) lineHeight(28.px)
property( property(
"font-family", "font-family",
@ -69,9 +69,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText2 by style { val wtText2 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(15.px) fontSize(15.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 24.px) lineHeight(24.px)
property( property(
"font-family", "font-family",
@ -82,9 +82,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText3 by style { val wtText3 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(12.px) fontSize(12.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 16.px) lineHeight(16.px)
property( property(
"font-family", "font-family",
@ -117,11 +117,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtH2 by style { val wtH2 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(31.px) fontSize(31.px)
property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) fontSize(AppCSSVariables.wtH2FontSize.value(31.px))
property("letter-spacing", (-.5).px) letterSpacing((-.5).px)
property("font-weight", 700) fontWeight(700)
property("line-height", 40.px) lineHeight(40.px)
property("line-height", 40.px) lineHeight(40.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -143,11 +143,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtH3 by style { val wtH3 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(21.px) fontSize(21.px)
property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) fontSize(AppCSSVariables.wtH3FontSize.value(20.px))
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 700) fontWeight(700)
property("line-height", 28.px) lineHeight(28.px)
property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) lineHeight(AppCSSVariables.wtH3LineHeight.value(28.px))
property( property(
"font-family", "font-family",
@ -164,11 +164,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
backgroundColor(Color("#167dff")) backgroundColor(Color("#167dff"))
fontSize(15.px) fontSize(15.px)
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("text-decoration", "none") textDecoration("none")
property("border-radius", "24px") borderRadius(24.px)
property("padding", "12px 32px") padding(12.px, 32.px)
property("line-height", 24.px) lineHeight(24.px)
property("font-weight", 400) fontWeight(400)
property("width", "fit-content") property("width", "fit-content")
hover(self) style { hover(self) style {
@ -183,7 +183,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
backgroundColor(Color("transparent")) backgroundColor(Color("transparent"))
border(0.px) border(0.px)
property("outline", "none") outline("none")
hover(self) style { hover(self) style {
backgroundColor(rgba(255, 255, 255, 0.1)) backgroundColor(rgba(255, 255, 255, 0.1))
@ -200,7 +200,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtSocialButtonItem by style { val wtSocialButtonItem by style {
property("margin-right", 16.px) marginRight(16.px)
marginLeft(16.px) marginLeft(16.px)
padding(12.px) padding(12.px)
backgroundColor(Color("transparent")) backgroundColor(Color("transparent"))
@ -208,13 +208,13 @@ object WtTexts : StyleSheet(AppStylesheet) {
hover(self) style { hover(self) style {
backgroundColor(rgba(255, 255, 255, 0.1)) backgroundColor(rgba(255, 255, 255, 0.1))
property("border-radius", "24px") borderRadius(24.px)
} }
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
property("margin-right", 8.px) marginRight(8.px)
property("margin-left", 8.px) marginLeft(8.px)
} }
} }
} }

6
web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt

@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) {
flexDirection(FlexDirection.Column) flexDirection(FlexDirection.Column)
height(100.percent) height(100.percent)
margin(0.px) margin(0.px)
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
content() content()
@ -28,8 +28,8 @@ fun Layout(content: @Composable () -> Unit) {
fun MainContentLayout(content: @Composable () -> Unit) { fun MainContentLayout(content: @Composable () -> Unit) {
Main({ Main({
style { style {
property("flex", "1 0 auto") flex("1 0 auto")
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
content() content()

3
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt

@ -8,6 +8,7 @@ import com.sample.components.Card
import com.sample.components.ContainerInSection import com.sample.components.ContainerInSection
import com.sample.components.LinkOnCard import com.sample.components.LinkOnCard
import com.sample.style.* import com.sample.style.*
import org.jetbrains.compose.web.css.paddingTop
data class CardWithListPresentation( data class CardWithListPresentation(
val title: String, val title: String,
@ -87,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) {
card.list.forEachIndexed { _, it -> card.list.forEachIndexed { _, it ->
Li({ Li({
style { style {
property("padding-top", 24.px) paddingTop(24.px)
} }
}) { Text(it) } }) { Text(it) }
} }

8
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@ -32,11 +32,11 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
descendant(self, CSSSelector.Type("label")) style { descendant(self, CSSSelector.Type("label")) style {
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("width", SwitcherVariables.labelWidth.value(56.px)) width(SwitcherVariables.labelWidth.value(56.px))
property("padding", SwitcherVariables.labelPadding.value(10.px)) padding(SwitcherVariables.labelPadding.value(10.px))
property("transition", "all 0.3s") property("transition", "all 0.3s")
property("text-align", "center") textAlign("center")
property("box-sizing", "border-box") boxSizing("border-box")
border { border {
style(LineStyle.Solid) style(LineStyle.Solid)

6
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@ -238,7 +238,7 @@ private fun TitledCodeSample(title: String, code: String) {
style { style {
backgroundColor(rgba(39, 40, 44, 0.05)) backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px) borderRadius(8.px, 8.px, 8.px)
property("padding", "12px 16px") padding(12.px, 16.px)
} }
}) { }) {
FormattedCodeSnippet(code = code) FormattedCodeSnippet(code = code)
@ -249,8 +249,8 @@ private fun TitledCodeSample(title: String, code: String) {
fun FormattedCodeSnippet(code: String, language: String = "kotlin") { fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
Pre({ Pre({
style { style {
property("max-height", 25.em) maxHeight(25.em)
property("overflow", "auto") overflow("auto")
height(auto) height(auto)
} }
}) { }) {

6
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt

@ -13,13 +13,13 @@ fun PageFooter() {
Footer({ Footer({
style { style {
flexShrink(0) flexShrink(0)
property("box-sizing", "border-box") boxSizing("border-box")
} }
}) { }) {
Section({ Section({
classes(WtSections.wtSectionBgGrayDark) classes(WtSections.wtSectionBgGrayDark)
style { style {
property("padding", "24px 0") padding(24.px, 0.px)
} }
}) { }) {
Div({ classes(WtContainer.wtContainer) }) { Div({ classes(WtContainer.wtContainer) }) {
@ -61,7 +61,7 @@ private fun CopyrightInFooter() {
style { style {
justifyContent(JustifyContent.SpaceEvenly) justifyContent(JustifyContent.SpaceEvenly)
flexWrap(FlexWrap.Wrap) flexWrap(FlexWrap.Wrap)
property("padding", "0px 12px") padding(0.px, 12.px)
} }
}) { }) {
Span({ Span({

4
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt

@ -50,8 +50,8 @@ private fun LanguageButton() {
onClick { window.alert("Oops! This feature is yet to be implemented") } onClick { window.alert("Oops! This feature is yet to be implemented") }
}) { }) {
Img(src = "ic_lang.svg", attrs = { style { Img(src = "ic_lang.svg", attrs = { style {
property("padding-left", 8.px) paddingLeft(8.px)
property("padding-right", 8.px) paddingRight(8.px)
}}) }})
Text("English") Text("English")
} }

4
web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt

@ -40,7 +40,7 @@ fun Intro() {
classes(WtTexts.wtHero) classes(WtTexts.wtHero)
style { style {
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("white-space", "nowrap") whiteSpace("nowrap")
} }
}) { }) {
Text("Web") Text("Web")
@ -170,7 +170,7 @@ private fun IntroCodeSampleResult() {
Span({ Span({
classes(WtTexts.wtText2) classes(WtTexts.wtText2)
style { style {
property("margin-right", 8.px) marginRight(8.px)
} }
}) { }) {
Text("Result:") Text("Result:")

18
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@ -26,21 +26,21 @@ object AppCSSVariables {
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 {
property("padding", "5px 12px") padding(5.px, 12.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 24.px) lineHeight(24.px)
position(Position.Relative) position(Position.Relative)
top((-32).px) top((-32).px)
marginLeft(8.px) marginLeft(8.px)
fontSize(15.px) fontSize(15.px)
backgroundColor(rgba(39, 40, 44, .05)) backgroundColor(rgba(39, 40, 44, .05))
color(rgba(39,40,44,.7)) color(rgba(39, 40, 44, .7))
borderRadius(4.px, 4.px, 4.px) borderRadius(4.px, 4.px, 4.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() {
value = "wtCol", value = "wtCol",
operator = CSSSelector.Attribute.Operator.Contains operator = CSSSelector.Attribute.Operator.Contains
) style { ) style {
property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value()) marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value()) marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())
property( property(
"flex-basis", "flex-basis",
@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() {
"max-width", "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") boxSizing("border-box")
} }
} }
} }

16
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt

@ -7,8 +7,8 @@ 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") boxSizing("border-box")
} }
val wtCardThemeLight by style { val wtCardThemeLight by style {
@ -25,11 +25,11 @@ object WtCards : StyleSheet(AppStylesheet) {
val wtCardSection by style { val wtCardSection by style {
position(Position.Relative) position(Position.Relative)
property("overflow", "auto") overflow("auto")
property("flex", "1 1 auto") flex( "1 1 auto")
property("min-height", 0) minHeight( 0.px)
property("box-sizing", "border-box") boxSizing("border-box")
property("padding", "24px 32px") padding(24.px, 32.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { padding(16.px) } self style { padding(16.px) }
@ -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)
} }
} }

6
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt

@ -119,19 +119,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")
} }
} }

26
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt

@ -6,32 +6,32 @@ object WtContainer : StyleSheet(AppStylesheet) {
val wtContainer by style { val wtContainer by style {
property("margin-left", "auto") property("margin-left", "auto")
property("margin-right", "auto") property("margin-right", "auto")
property("box-sizing", "border-box") boxSizing("border-box")
property("padding-left", 22.px) paddingLeft(22.px)
property("padding-right", 22.px) paddingRight(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) paddingLeft(6.px)
property("padding-right", 16.px) paddingRight(16.px)
} }
} }
media(mediaMaxWidth(1276.px)) { media(mediaMaxWidth(1276.px)) {
self style { self style {
property("max-width", 996.px) maxWidth(996.px)
property("padding-left", 22.px) paddingLeft(2.px)
property("padding-right", 22.px) paddingRight(22.px)
} }
} }
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) paddingLeft(2.px)
property("padding-right", 22.px) paddingRight(22.px)
} }
} }
} }

2
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt

@ -17,7 +17,7 @@ object WtRows : StyleSheet(AppStylesheet) {
"margin-left", "margin-left",
"calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})"
) )
property("box-sizing", "border-box") boxSizing("border-box")
} }
val wtRowSizeM by style { val wtRowSizeM by style {

6
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt

@ -5,9 +5,9 @@ import org.jetbrains.compose.web.css.*
object WtSections : StyleSheet(AppStylesheet) { object WtSections : StyleSheet(AppStylesheet) {
val wtSection by style { val wtSection by style {
property("box-sizing", "border-box") boxSizing("border-box")
property("padding-bottom", 96.px) paddingBottom(96.px)
property("padding-top", 1.px) paddingTop(1.px)
property( property(
propertyName = "padding-bottom", propertyName = "padding-bottom",
value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})"

78
web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt

@ -8,11 +8,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtHero by style { val wtHero by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(60.px) fontSize(60.px)
property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) fontSize(AppCSSVariables.wtHeroFontSize.value(60.px))
property("letter-spacing", (-1.5).px) letterSpacing((-1.5).px)
property("font-weight", 900) fontWeight(900)
property("line-height", 64.px) lineHeight(64.px)
property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) lineHeight(AppCSSVariables.wtHeroLineHeight.value(64.px))
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -30,11 +30,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtSubtitle2 by style { val wtSubtitle2 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(28.px) fontSize(28.px)
property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) fontSize(AppCSSVariables.wtSubtitle2FontSize.value(28.px))
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 300) fontWeight(300)
property("line-height", 40.px) lineHeight(40.px)
property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) lineHeight(AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -52,9 +52,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText1 by style { val wtText1 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(18.px) fontSize(18.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 28.px) lineHeight(28.px)
property( property(
"font-family", "font-family",
@ -69,9 +69,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText2 by style { val wtText2 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(15.px) fontSize(15.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 24.px) lineHeight(24.px)
property( property(
"font-family", "font-family",
@ -82,9 +82,9 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtText3 by style { val wtText3 by style {
color(rgba(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(12.px) fontSize(12.px)
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 400) fontWeight(400)
property("line-height", 16.px) lineHeight(16.px)
property( property(
"font-family", "font-family",
@ -117,11 +117,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtH2 by style { val wtH2 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(31.px) fontSize(31.px)
property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) fontSize(AppCSSVariables.wtH2FontSize.value(31.px))
property("letter-spacing", (-.5).px) letterSpacing((-.5).px)
property("font-weight", 700) fontWeight(700)
property("line-height", 40.px) lineHeight(40.px)
property("line-height", 40.px) lineHeight(40.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
@ -143,11 +143,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
val wtH3 by style { val wtH3 by style {
color(Color("#27282c")) color(Color("#27282c"))
fontSize(21.px) fontSize(21.px)
property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) fontSize(AppCSSVariables.wtH3FontSize.value(20.px))
property("letter-spacing", "normal") letterSpacing("normal")
property("font-weight", 700) fontWeight(700)
property("line-height", 28.px) lineHeight(28.px)
property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) lineHeight(AppCSSVariables.wtH3LineHeight.value(28.px))
property( property(
"font-family", "font-family",
@ -164,11 +164,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
backgroundColor(Color("#167dff")) backgroundColor(Color("#167dff"))
fontSize(15.px) fontSize(15.px)
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
property("text-decoration", "none") textDecoration("none")
property("border-radius", "24px") borderRadius(24.px)
property("padding", "12px 32px") padding(12.px, 32.px)
property("line-height", 24.px) lineHeight(24.px)
property("font-weight", 400) fontWeight(400)
property("width", "fit-content") property("width", "fit-content")
hover(self) style { hover(self) style {
@ -183,7 +183,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
backgroundColor(Color("transparent")) backgroundColor(Color("transparent"))
border(0.px) border(0.px)
property("outline", "none") outline("none")
hover(self) style { hover(self) style {
backgroundColor(rgba(255, 255, 255, 0.1)) backgroundColor(rgba(255, 255, 255, 0.1))
@ -200,7 +200,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtSocialButtonItem by style { val wtSocialButtonItem by style {
property("margin-right", 16.px) marginRight(16.px)
marginLeft(16.px) marginLeft(16.px)
padding(12.px) padding(12.px)
backgroundColor(Color("transparent")) backgroundColor(Color("transparent"))
@ -208,13 +208,13 @@ object WtTexts : StyleSheet(AppStylesheet) {
hover(self) style { hover(self) style {
backgroundColor(rgba(255, 255, 255, 0.1)) backgroundColor(rgba(255, 255, 255, 0.1))
property("border-radius", "24px") borderRadius(24.px)
} }
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
self style { self style {
property("margin-right", 8.px) marginRight(8.px)
property("margin-left", 8.px) marginLeft(8.px)
} }
} }
} }

Loading…
Cancel
Save