Skip to content

Commit

Permalink
Implemented logical properties
Browse files Browse the repository at this point in the history
  • Loading branch information
Malavika Koppula committed Dec 4, 2023
1 parent db80082 commit 611fede
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 101 deletions.
115 changes: 65 additions & 50 deletions .storybook/themes/news.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1852,36 +1852,39 @@
"results-list": (
"components": (
"attribution": (
"margin-top": var(--global-spacing-4)
),
"media-item": (
"float": right,
"max-width": 100px
"margin-block-start": var(--global-spacing-4)
),
"overline": (
"font-size": var(--body-font-size)
"button": (
"gap": var(--global-spacing-6)
),
"heading": (
"font-size": var(--heading-level-5-font-size),
"font-weight": var(--heading-level-5-font-weight),
"line-height": var(--heading-level-5-line-height),
"margin-bottom": var(--global-spacing-4)
"line-block-size": var(--heading-level-5-line-height),
"margin-block-end": var(--global-spacing-4)
),
"button": (
"gap": var(--global-spacing-6)
"media-item": (
"float": inline-end,
"max-inline-size": 100px
),
"overline": (
"font-size": var(--body-font-size)
),
"separator": (
"padding": 0 var(--global-spacing-2)
"padding-block-end": 0,
"padding-block-start": 0,
"padding-inline-end": var(--global-spacing-2),
"padding-inline-start": var(--global-spacing-2)
)
)
),
"results-list-see-more": (
"margin-top": var(--global-spacing-2)
"margin-block-size": var(--global-spacing-2)
),
"results-list-show-image": (
"components": (
"heading": (
"width": 68%
"inline-size": 68%
),
"overline": (
"font-size": var(--body-font-size)
Expand Down Expand Up @@ -2014,10 +2017,10 @@
),
"icon": (
"align-self": center,
"block-size": var(--global-spacing-5),
"grid-area": icon,
"height": var(--global-spacing-5),
"inline-size": var(--global-spacing-5),
"justify-self": center,
"width": var(--global-spacing-5),
"z-index": 1
),
"input": (
Expand All @@ -2027,55 +2030,61 @@
"input-input": (
"font-family": var(--font-family-primary),
"font-weight": var(--global-font-weight-7),
"padding-left": var(--global-spacing-7),
"width": 100%
"inline-size": 100%,
"padding-inline-start": var(--global-spacing-7)
)
)
),
"search-results-list-results": (
"components": (
"button": (
"margin": var(--global-spacing-2) auto 0,
"width": auto
"inline-size": auto,
"margin-block-end": 0,
"margin-block-start": var(--global-spacing-2),
"margin-inline-end": auto,
"margin-inline-start": auto
)
)
),
"search-results-list-results-item": (
"components": (
"attribution": (
"display": block,
"margin-top": var(--global-spacing-4)
"margin-block-start": var(--global-spacing-4)
),
"heading": (
"font-size": var(--heading-level-5-font-size),
"font-weight": var(--heading-level-5-font-weight),
"line-height": var(--heading-level-5-line-height),
"margin-bottom": var(--global-spacing-4)
"line-block-size": var(--heading-level-5-line-height),
"margin-block-end": var(--global-spacing-4)
),
"link": (
"position": relative
),
"media-item": (
"float": right,
"max-width": 100px
"float": inline-end,
"max-inline-size": 100px
),
"overline": (
"font-weight": var(--heading-level-4-font-weight),
"font-size": var(--heading-level-5-font-size),
"line-height": var(--heading-level-5-line-height)
"line-block-size": var(--heading-level-5-line-height)
),
"paragraph": (
"display": block
),
"separator": (
"padding": 0 var(--global-spacing-2)
),
"link": (
"position": relative
"padding-block-end": 0,
"padding-block-start": 0,
"padding-inline-end": var(--global-spacing-2),
"padding-inline-start": var(--global-spacing-2)
)
)
),
"search-results-list-results-item-show-image": (
"components": (
"heading": (
"width": 68%
"inline-size": 68%
),
"overline": (
"font-size": var(--body-font-size)
Expand Down Expand Up @@ -3317,9 +3326,12 @@
"results-list": (
"components": (
"media-item": (
"float": left,
"margin": 0,
"max-width": 33%
"float": inline-start,
"margin-block-top": 0,
"margin-block-end": 0,
"margin-inline-start": 0,
"margin-inline-end": 0,
"max-inline-size": 33%
),
"overline": (
"font-size": var(--global-font-size-7)
Expand All @@ -3330,18 +3342,18 @@
"components": (
"attribution": (
"display": block,
"margin-left": calc(33% + var(--global-spacing-6))
"margin-inline-end": calc(33% + var(--global-spacing-6))
),
"heading": (
"margin-left": calc(33% + var(--global-spacing-6)),
"width": auto
),
"paragraph": (
"margin-left": calc(33% + var(--global-spacing-6))
"margin-inline-end": calc(33% + var(--global-spacing-6)),
"inline-size": auto
),
"overline": (
"margin-left": var(--global-spacing-6),
"margin-inline-end": var(--global-spacing-6),
"font-size": var(--global-font-size-7)
),
"paragraph": (
"margin-inline-end": calc(33% + var(--global-spacing-6))
)
)
),
Expand Down Expand Up @@ -3383,9 +3395,12 @@
"display": block
),
"media-item": (
"float": left,
"margin": 0,
"max-width": 33%
"float": inline-start,
"margin-block-end": 0,
"margin-block-start": 0,
"margin-inline-end": 0,
"margin-inline-start": 0,
"max-inline-size": 33%
),
"paragraph": (
"display": block
Expand All @@ -3395,18 +3410,18 @@
"search-results-list-results-item-show-image": (
"components": (
"attribution": (
"margin-left": calc(33% + var(--global-spacing-6))
"margin-inline-start": calc(33% + var(--global-spacing-6))
),
"heading": (
"margin-left": calc(33% + var(--global-spacing-6)),
"width": auto
"inline-size": auto,
"margin-inline-start": calc(33% + var(--global-spacing-6))
),
"overline": (
"margin-left": var(--global-spacing-6),
"font-size": var(--heading-level-5-font-size)
"font-size": var(--heading-level-5-font-size),
"margin-inline-start": var(--global-spacing-6)
),
"paragraph": (
"margin-left": calc(33% + var(--global-spacing-6))
"margin-inline-start": calc(33% + var(--global-spacing-6))
)
)
),
Expand Down
56 changes: 31 additions & 25 deletions blocks/results-list-block/themes/news.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,41 @@
"default": {
"components": {
"attribution": {
"margin-top": "var(--global-spacing-4)"
"margin-block-start": "var(--global-spacing-4)"
},
"media-item": {
"float": "right",
"max-width": "100px"
},
"overline": {
"font-size": "var(--body-font-size)"
"button": {
"gap": "var(--global-spacing-6)"
},
"heading": {
"font-size": "var(--heading-level-5-font-size)",
"font-weight": "var(--heading-level-5-font-weight)",
"line-height": "var(--heading-level-5-line-height)",
"margin-bottom": "var(--global-spacing-4)"
"line-block-size": "var(--heading-level-5-line-height)",
"margin-block-end": "var(--global-spacing-4)"
},
"button": {
"gap": "var(--global-spacing-6)"
"media-item": {
"float": "inline-end",
"max-inline-size": "100px"
},
"overline": {
"font-size": "var(--body-font-size)"
},
"separator": {
"padding": "0 var(--global-spacing-2)"
"padding-block-end": "0",
"padding-block-start": "0",
"padding-inline-end": "var(--global-spacing-2)",
"padding-inline-start": "var(--global-spacing-2)"
}
}
},
"desktop": {
"components": {
"media-item": {
"float": "left",
"margin": 0,
"max-width": "33%"
"float": "inline-start",
"margin-block-end": 0,
"margin-block-start": 0,
"margin-inline-end": 0,
"margin-inline-start": 0,
"max-inline-size": "33%"
},
"overline": {
"font-size": "var(--global-font-size-7)"
Expand All @@ -44,7 +50,7 @@
"results-list-see-more": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-2)"
"margin-block-start": "var(--global-spacing-2)"
},
"desktop": {}
}
Expand All @@ -54,7 +60,7 @@
"default": {
"components": {
"heading": {
"width": "68%"
"inline-size": "68%"
},
"overline": {
"font-size": "var(--body-font-size)"
Expand All @@ -65,18 +71,18 @@
"components": {
"attribution": {
"display": "block",
"margin-left": "calc(33% + var(--global-spacing-6))"
"margin-inline-start": "calc(33% + var(--global-spacing-6))"
},
"heading": {
"margin-left": "calc(33% + var(--global-spacing-6))",
"width": "auto"
},
"paragraph": {
"margin-left": "calc(33% + var(--global-spacing-6))"
"inline-size": "auto",
"margin-inline-start": "calc(33% + var(--global-spacing-6))"
},
"overline": {
"margin-left": "var(--global-spacing-6)",
"font-size": "var(--global-font-size-7)"
"font-size": "var(--global-font-size-7)",
"margin-inline-start": "var(--global-spacing-6)"
},
"paragraph": {
"margin-inline-start": "calc(33% + var(--global-spacing-6))"
}
}
}
Expand Down
Loading

0 comments on commit 611fede

Please sign in to comment.