github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Update web_landing sample and web_langin example with fresher CSS API

pull/966/head
Shagen Ogandzhanian 3 years ago
parent
3902bf2768
commit
9654149ec7
29 changed files with 191 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -26,21 +26,21 @@ object AppCSSVariables {
object AppStylesheet : StyleSheet() {
val composeLogo by style {
property("max-width", 100.percent)
maxWidth(100.percent)
}
val composeTitleTag by style {
property("padding", "5px 12px")
property("letter-spacing", "normal")
property("font-weight", 400)
property("line-height", 24.px)
padding(5.px, 12.px)
letterSpacing("normal")
fontWeight(400)
lineHeight(24.px)
position(Position.Relative)
top((-32).px)
marginLeft(8.px)
fontSize(15.px)
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)
media(mediaMaxWidth(640.px)) {
@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() {
value = "wtCol",
operator = CSSSelector.Attribute.Operator.Contains
) style {
property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value())
property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value())
marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())
property(
"flex-basis",
@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() {
"max-width",
"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
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -26,21 +26,21 @@ object AppCSSVariables {
object AppStylesheet : StyleSheet() {
val composeLogo by style {
property("max-width", 100.percent)
maxWidth(100.percent)
}
val composeTitleTag by style {
property("padding", "5px 12px")
property("letter-spacing", "normal")
property("font-weight", 400)
property("line-height", 24.px)
padding(5.px, 12.px)
letterSpacing("normal")
fontWeight(400)
lineHeight(24.px)
position(Position.Relative)
top((-32).px)
marginLeft(8.px)
fontSize(15.px)
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)
media(mediaMaxWidth(640.px)) {
@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() {
value = "wtCol",
operator = CSSSelector.Attribute.Operator.Contains
) style {
property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value())
property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value())
marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())
property(
"flex-basis",
@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() {
"max-width",
"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
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save