_style.scss (1798B)
1 .wp-block-group { 2 // Start IE clearfix. 3 // This hack is only necessary because we want to support IE11. 4 // If we don't want to support IE11, then "display: flow-root" would suffice. 5 display: block; 6 clear: both; 7 8 display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties 9 10 &:before, 11 &:after { 12 content: ""; 13 display: block; 14 clear: both; 15 } 16 // End IE clearfix. 17 18 .wp-block-group__inner-container { 19 margin-left: auto; 20 margin-right: auto; 21 22 > * { 23 margin-top: calc(0.666 * var(--global--spacing-vertical)); 24 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 25 26 &.alignfull { 27 @extend %responsive-alignfull-width-mobile; 28 } 29 30 @include media(mobile) { 31 margin-top: var(--global--spacing-vertical); 32 margin-bottom: var(--global--spacing-vertical); 33 } 34 35 &:first-child { 36 margin-top: 0; 37 } 38 39 &:last-child { 40 margin-bottom: 0; 41 } 42 } 43 } 44 45 &.has-background { 46 padding: calc(0.666 * var(--global--spacing-vertical)); 47 48 @include media(mobile) { 49 padding: var(--global--spacing-vertical); 50 } 51 } 52 53 // Block Styles 54 &.is-style-twentytwentyone-border { 55 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 56 padding: var(--global--spacing-vertical); 57 } 58 59 // Adjust alignfull items to account for left and right padding. 60 &.has-background, 61 &.is-style-twentytwentyone-border { 62 63 .wp-block-group__inner-container > .alignfull, 64 .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { 65 max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 66 width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 67 margin-left: calc(-1 * var(--global--spacing-vertical)); 68 } 69 } 70 }