diff --git a/src/scss/components/_BlockCircleImageCard.scss b/src/scss/components/_BlockCircleImageCard.scss index 26f955b77..0623f6d85 100644 --- a/src/scss/components/_BlockCircleImageCard.scss +++ b/src/scss/components/_BlockCircleImageCard.scss @@ -1,15 +1,13 @@ .BlockCircleImageCard { - $smallsize: 90px; - $largesize: 130px; + $circlesize: 90px; - img.BaseImage { - width: $smallsize; - height: $smallsize; + @screen lg { + $circlesize: 130px; + } - @screen lg { - width: $largesize; - height: $largesize; - } + img.BaseImage { + width: $circlesize; + height: $circlesize; } .BaseImagePlaceholder { @@ -18,37 +16,21 @@ &.imageOnLeft { > div:first-of-type { - left: calc(-1 * $smallsize / 2); - - @screen lg { - left: calc(-1 * $largesize / 2); - } + left: calc(-1 * $circlesize / 2); } .content { - padding-left: calc($smallsize / 2 + 32px); - - @screen lg { - padding-left: calc($largesize / 2 + 32px); - } + padding-left: calc($circlesize / 2 + 2rem); } } &.imageOnRight { > div:first-of-type { - right: calc(-1 * $smallsize / 2); - - @screen lg { - right: calc(-1 * $largesize / 2); - } + right: calc(-1 * $circlesize / 2); } .content { - padding-right: calc($smallsize / 2 + 32px); - - @screen lg { - padding-right: calc($largesize / 2 + 32px); - } + padding-right: calc($circlesize / 2 + 2rem); } } } diff --git a/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js b/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js index c82131f04..5544aca5f 100644 --- a/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js +++ b/storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js @@ -2,17 +2,13 @@ import { BaseImagePlaceholderTemplate } from '../BaseImagePlaceholder/BaseImageP import { BaseHeadingTemplate } from '../BaseHeading/BaseHeading' export const BlockCircleImageCardTemplate = ({ - type, + type = 'imageOnLeft', title, label, - secondaryLabel, + secondaryLabel = '', image, - customClass, + customClass = '', }) => { - if (!type) type = 'imageOnLeft' - if (!secondaryLabel) secondaryLabel = '' - if (!customClass) customClass = '' - return `
${BaseImagePlaceholderTemplate({