diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index f1b27f508f..790123a724 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -1,4 +1,3 @@ -/* stylelint-disable selector-class-pattern */ .icon-block { display: block; width: 100%; @@ -64,10 +63,6 @@ overflow: hidden; } -.icon-block.fullwidth .foreground .icon-area { - margin-bottom: var(--spacing-m); -} - .icon-block .foreground .icon-area img { height: var(--icon-size-xxl); width: auto; @@ -78,11 +73,21 @@ min-width: var(--icon-size-xxl); } +.icon-block.bio .foreground .icon-area img { + object-fit: cover; + height: var(--icon-size-xl); + width: var(--icon-size-xl); +} + .icon-block.inline.bio .icon-area, .icon-block.inline.bio .icon-area picture img { min-width: var(--icon-size-xl); } +.icon-block.fullwidth .foreground .icon-area { + margin-bottom: var(--spacing-m); +} + .icon-block.vertical .foreground .icon-area { margin: 0; } @@ -106,12 +111,6 @@ margin-top: var(--spacing-s); } -.icon-block.bio .foreground .icon-area img { - object-fit: cover; - height: var(--icon-size-xl); - width: var(--icon-size-xl); -} - .icon-block.inline.m-icon .icon-area, .icon-block.inline.m-icon .icon-area picture img { min-width:var(--icon-size-m); @@ -162,6 +161,18 @@ max-width: var(--icon-size-xxl); } +.icon-block.inline.m-icon.bio .icon-area, +.icon-block.inline.m-icon.bio .icon-area picture img { + height: var(--icon-size-m); + width: var(--icon-size-m); +} + +.icon-block.inline.l-icon.bio .icon-area, +.icon-block.inline.l-icon.bio .icon-area picture img { + height: var(--icon-size-l); + width: var(--icon-size-l); +} + .five-up .icon-block.inline.m-icon .foreground .icon-area, .five-up .icon-block.inline.m-icon .foreground .icon-area img { max-width: var(--icon-size-m); @@ -202,15 +213,6 @@ margin-bottom: 0; } -.icon-block:not(.small.fullwidth) .foreground .text-content .action-area { - white-space: nowrap; - display: flex; - flex-wrap: wrap; - align-items: center; - column-gap: var(--spacing-s); - row-gap: var(--spacing-xs); -} - .icon-block.fullwidth .foreground .text-content .action-area { justify-content: center; } @@ -220,6 +222,15 @@ flex-direction: column; } +.icon-block:not(.small.fullwidth) .foreground .text-content .action-area { + white-space: initial; + display: flex; + flex-wrap: wrap; + align-items: center; + column-gap: var(--spacing-s); + row-gap: var(--spacing-xs); +} + .icon-block .foreground div { flex: 1 1 auto; } @@ -239,26 +250,14 @@ margin: 0 auto; } -[class*="-up"] .icon-block.bio.inline .foreground { - max-width: unset; - width: unset; -} - .icon-block.bio.center .foreground, .icon-block.vertical.center .foreground { text-align: center; } -.icon-block.inline.m-icon.bio .icon-area, -.icon-block.inline.m-icon.bio .icon-area picture img { - height: var(--icon-size-m); - width: var(--icon-size-m); -} - -.icon-block.inline.l-icon.bio .icon-area, -.icon-block.inline.l-icon.bio .icon-area picture img { - height: var(--icon-size-l); - width: var(--icon-size-l); +[class*="-up"] .icon-block.bio.inline .foreground { + max-width: unset; + width: unset; } .icon-block.vertical.center .foreground .text-content .icon-area { @@ -359,6 +358,10 @@ min-width:var(--icon-size-xxl); } + .two-up .icon-block.vertical .foreground .icon-area { + max-width: 400px; + } + .icon-block.inline.bio.m-icon .icon-area, .icon-block.inline.bio.m-icon .icon-area picture img { min-width: var(--icon-size-m); @@ -369,6 +372,18 @@ min-width: var(--icon-size-l); } + .five-up .icon-block .foreground .text-content .icon-area { + text-align: center; + } + + .three-up .icon-block.vertical .foreground .icon-area { + max-width: 300px; + } + + .four-up .icon-block.vertical .foreground .icon-area { + max-width: 276px; + } + .five-up .icon-block.inline.m-icon .foreground .icon-area, .five-up .icon-block.inline.m-icon .foreground .icon-area img { max-width: var(--icon-size-m); @@ -401,30 +416,14 @@ text-align: center; } - .five-up .icon-block .foreground .text-content .icon-area { - text-align: center; - } - .three-up .icon-block.vertical .foreground .text-content:last-child { padding-right: 0; } - .two-up .icon-block.vertical .foreground .icon-area { - max-width: 400px; - } - .three-up .icon-block.bio .foreground { max-width: 300px; } - .three-up .icon-block.vertical .foreground .icon-area { - max-width: 300px; - } - - .four-up .icon-block.vertical .foreground .icon-area { - max-width: 276px; - } - .section.five-up { grid-template-columns: repeat(5, 1fr) !important; }