/** * Colors */ /** * Breakpoints & Media Queries */ /** * SCSS Variables. * * Please use variables from this sheet to ensure consistency across the UI. * Don't add to this sheet unless you're pretty sure the value will be reused in many places. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. */ /** * Colors */ /** * Fonts & basic variables. */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Dimensions. */ /** * Shadows. */ /** * Editor widths. */ /** * Block & Editor UI. */ /** * Block paddings. */ /** * React Native specific. * These variables do not appear to be used anywhere else. */ /** * Converts a hex value into the rgb equivalent. * * @param {string} hex - the hexadecimal value to convert * @return {string} comma separated rgb values */ /** * Breakpoint mixins */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * Focus styles. */ /** * Applies editor left position to the selector passed as argument */ /** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ /** * Reset default styles for JavaScript UI based pages. * This is a WP-admin agnostic reset */ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ .wp-block-columns { display: flex; margin-bottom: 1.75em; box-sizing: border-box; flex-wrap: wrap; /** * All Columns Alignment */ } @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap; } } .wp-block-columns:where(.has-background) { padding: 1.25em 2.375em; } .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; } @media (max-width: 599px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 600px) and (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) { flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important; flex-grow: 0; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(even) { margin-right: var(--wp--style--block-gap, 2em); } } @media (min-width: 782px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0; flex-grow: 1; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] { flex-grow: 0; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) { margin-right: var(--wp--style--block-gap, 2em); } } .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; } .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis: 0; flex-grow: 1; } .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*=flex-basis] { flex-grow: 0; } .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:not(:first-child) { margin-right: var(--wp--style--block-gap, 2em); } .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; /** * Individual Column Alignment */ } .wp-block-column.is-vertically-aligned-top { align-self: flex-start; } .wp-block-column.is-vertically-aligned-center { align-self: center; } .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; } .wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-bottom { width: 100%; }