packages/block-library/src/common.scss - trunk - githubmirror/gutenberg

packages/block-library/src/common.scss
245 строк5 KB
Andrew Duthie
Fix and permit unitless zeros used in CSS `calc` functions (#79786)
02 июл 2026, 00:06
02 июл 2026, 00:06e412445
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/default-custom-properties";
@use "./elements.scss" as *;

// The following selectors have increased specificity (using the :root prefix)
// to assure colors take effect over another base class color, mainly to let
// the colors override the added specificity by link states such as :hover.

:root {
	@include background-colors-deprecated();
	@include foreground-colors-deprecated();
	@include gradient-colors-deprecated();
	// This CSS Custom Properties aren't used anymore as defaults,
	// but we still need to keep them for backward compatibility.
	--wp--preset--font-size--normal: 16px;
	--wp--preset--font-size--huge: 42px;
}

// Font sizes (not used now, kept because of backward compatibility).
.has-regular-font-size {
	font-size: 1em;
}

.has-larger-font-size {
	font-size: 2.625em;
}

.has-normal-font-size {
	font-size: var(--wp--preset--font-size--normal);
}

.has-huge-font-size {
	font-size: var(--wp--preset--font-size--huge);
}

// Text alignments.
// The :root prefix increases CSS specificity from 0-1-0 to 0-2-0,
// ensuring that block instance-level text alignment overrides take
// precedence over global styles.
:root .has-text-align-center {
	text-align: center;
}
:root .has-text-align-left {
	/*rtl:ignore*/
	text-align: left;
}
:root .has-text-align-right {
	/*rtl:ignore*/
	text-align: right;
}

// Fit Text
.has-fit-text {
	white-space: nowrap !important;
}

// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
#end-resizable-editor-section {
	display: none;
}

// Block alignments.
.aligncenter {
	clear: both;
}

// Justification.
.items-justified-left {
	justify-content: flex-start;
}

.items-justified-center {
	justify-content: center;
}

.items-justified-right {
	justify-content: flex-end;
}

.items-justified-space-between {
	justify-content: space-between;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal !important;
}

.screen-reader-text:focus {
	background-color: $gray-300;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/**
 * The following provide a simple means of applying a default border style when
 * a user first makes a selection in the border block support panel.
 * This prevents issues such as where the user could set a border width
 * and see no border due there being no border style set.
 *
 * This is intended to be removed once intelligent defaults can be set while
 * making border selections via the block support.
 *
 * See: https://github.com/WordPress/gutenberg/pull/33743
 */
html :where(.has-border-color) {
	border-style: solid;
}
// Use ^= and *=; selectors so custom properties like --my-border-color
// don't accidentally match. Only real declarations at the start of
// the style string or after a semicolon should trigger these rules.
html
:where(
	[style^="border-color"],
	[style*=";border-color"],
	[style*="; border-color"]
) {
	border-style: solid;
}
html
:where(
	[style^="border-top-color"],
	[style*=";border-top-color"],
	[style*="; border-top-color"]
) {
	border-top-style: solid;
}
html
:where(
	[style^="border-right-color"],
	[style*=";border-right-color"],
	[style*="; border-right-color"]
) {
	/*rtl:ignore*/
	border-right-style: solid;
}
html
:where(
	[style^="border-bottom-color"],
	[style*=";border-bottom-color"],
	[style*="; border-bottom-color"]
) {
	border-bottom-style: solid;
}
html
:where(
	[style^="border-left-color"],
	[style*=";border-left-color"],
	[style*="; border-left-color"]
) {
	/*rtl:ignore*/
	border-left-style: solid;
}

html
:where(
	[style^="border-width"],
	[style*=";border-width"],
	[style*="; border-width"]
) {
	border-style: solid;
}
html
:where(
	[style^="border-top-width"],
	[style*=";border-top-width"],
	[style*="; border-top-width"]
) {
	border-top-style: solid;
}
html
:where(
	[style^="border-right-width"],
	[style*=";border-right-width"],
	[style*="; border-right-width"]
) {
	/*rtl:ignore*/
	border-right-style: solid;
}
html
:where(
	[style^="border-bottom-width"],
	[style*=";border-bottom-width"],
	[style*="; border-bottom-width"]
) {
	border-bottom-style: solid;
}
html
:where(
	[style^="border-left-width"],
	[style*=";border-left-width"],
	[style*="; border-left-width"]
) {
	/*rtl:ignore*/
	border-left-style: solid;
}

/**
 * Provide baseline responsiveness for images.
 */
html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 100%;
}

/**
 * Reset user agent styles for figure element margins.
 */
:where(figure) {
	margin: 0 0 1em 0;
}

// Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
// This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
html :where(.is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
}

// To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
// within the scope of the position classname. This is required because the admin bar
// is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
@media screen and (max-width: 600px) {
	html :where(.is-position-sticky) {
		--wp-admin--admin-bar--position-offset: 0px;
	}
}