jlengrand/compose-multiplatform
1
0
Fork 0
mirror of https://github.com/jlengrand/compose-multiplatform.git synced 2026-05-12 00:01:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update web_landing sample and web_langin example with fresher CSS API

Browse Source
This commit is contained in:
Shagen Ogandzhanian
2021-07-30 16:24:41 +02:00
parent 3902bf2768
commit 9654149ec7
29 changed files with 191 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/web_landing/build.gradle.kts
View File

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

6
examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
}
}
}