diff --git a/changelogs/DP-35365.yml b/changelogs/DP-35365.yml new file mode 100644 index 0000000000..5154d377fa --- /dev/null +++ b/changelogs/DP-35365.yml @@ -0,0 +1,6 @@ +Changed: + - project: Patternlab + component: Assets + description: Fix image styles in rich text with text wrapping. (#1938) + issue: DP-35365 + impact: Patch diff --git a/packages/assets/scss/01-atoms/_figure.scss b/packages/assets/scss/01-atoms/_figure.scss index 6393a7661c..4558b370fd 100644 --- a/packages/assets/scss/01-atoms/_figure.scss +++ b/packages/assets/scss/01-atoms/_figure.scss @@ -34,6 +34,12 @@ $figures-gutter: 20px; margin-left: 0; width: 50%; } + &:not(.ma__figure-iframe) { + &.align-left { + max-width: 50%; + width: auto; + } + } &--right, &--align-right, @@ -42,6 +48,12 @@ $figures-gutter: 20px; margin-right: 0; width: 50%; } + &:not(&-iframe) { + &.align-right { + max-width: 50%; + width: auto; + } + } } &--full { @@ -51,7 +63,7 @@ $figures-gutter: 20px; } img { - width: 100%; + max-width: 100%; } &__caption { @@ -77,6 +89,11 @@ $figures-gutter: 20px; &--x-small { width: calc(#{$medium} - #{$figures-gutter}); } + + &--x-small:not(&-iframe) { + max-width: calc(#{$medium} - #{$figures-gutter}); + width: auto; + } } @media ($bp-x-small-min) and ($bp-small-max) { @@ -95,6 +112,12 @@ $figures-gutter: 20px; &--small { width: calc(#{$medium} - #{$figures-gutter}); } + + &--x-small:not(&-iframe), + &--small:not(&-iframe) { + max-width: calc(#{$medium} - #{$figures-gutter}); + width: auto; + } } @media ($bp-medium-min) { @@ -105,9 +128,19 @@ $figures-gutter: 20px; width: calc(#{$x-small} - #{$figures-gutter}) } + &--x-small:not(&-iframe) { + max-width: calc(#{$x-small} - #{$figures-gutter}); + width: auto; + } + &--small { width: calc(#{$small} - #{$figures-gutter}); } + + &--small:not(&-iframe) { + max-width: calc(#{$small} - #{$figures-gutter}); + width: auto; + } } @media ($bp-x-large-min) { @@ -116,6 +149,11 @@ $figures-gutter: 20px; .page-content &--x-small { width: calc(#{$x-small} - #{$figures-gutter}); } + + .page-content &--x-small:not(&-iframe) { + max-width: calc(#{$x-small} - #{$figures-gutter}); + width: auto; + } } // Size - Medium @@ -124,6 +162,10 @@ $figures-gutter: 20px; @media ($bp-small-min) { // 621~ width: calc(#{$medium} - #{$figures-gutter}); + &:not(.ma__figure-iframe) { + max-width: calc(#{$medium} - #{$figures-gutter}); + width: auto; + } } } @@ -161,8 +203,6 @@ $figures-gutter: 20px; .page-content:not(.no-sidebar) &--medium, .page-content:not(.no-sidebar) &--large { width: 100%; - margin-right: 0; - margin-left: 0; } } @@ -228,7 +268,8 @@ $figures-gutter: 20px; @media ($bp-small-min) { // 621~ - width: 100%; + width: auto; + max-width: 100%; padding-left: calc(100% / 3 * 2); //66.66% } } @@ -244,7 +285,8 @@ $figures-gutter: 20px; @media ($bp-small-min) { // 621~ - width: 100%; + width: auto; + max-width: 100%; padding-left: 50%; } }