123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- // Editor UI font styles
- .wp-block.block-editor-default-block-appender > textarea {
- font-family: var(--global--font-secondary);
- font-size: var(--global--font-size-md);
- }
- // Gutenberg text color options
- .has-text-color {}
- .has-primary-color[class] {
- color: var(--global--color-primary);
- }
- .has-secondary-color[class] {
- color: var(--global--color-secondary);
- }
- .has-foreground-color[class] {
- color: var(--global--color-foreground);
- }
- .has-foreground-low-contrast-color[class] {
- color: var(--global--color-foreground-low-contrast);
- }
- .has-foreground-high-contrast-color[class] {
- color: var(--global--color-foreground-high-contrast);
- }
- .has-tertiary-color[class] {
- color: var(--global--color-tertiary);
- }
- .has-background-dark-color[class] {
- color: var(--global--color-background-dark);
- }
- .has-background-color[class] {
- color: var(--global--color-background);
- }
- .has-primary-background-color[class] {
- background-color: var(--global--color-primary);
- color: var(--global--color-background);
- }
- .has-primary-background-color[class] {
- background-color: var(--global--color-primary);
- color: var(--global--color-background);
- }
- .has-secondary-background-color[class] {
- background-color: var(--global--color-secondary);
- color: var(--global--color-background);
- }
- .has-foreground-background-color[class] {
- background-color: var(--global--color-foreground);
- color: var(--global--color-background);
- }
- .has-foreground-light-background-color[class] {
- background-color: var(--global--color-foreground-low-contrast);
- color: var(--global--color-background);
- }
- .has-foreground-high-contrast-background-color[class] {
- background-color: var(--global--color-foreground-high-contrast);
- color: var(--global--color-background);
- }
- .has-tertiary-background-color[class] {
- background-color: var(--global--color-tertiary);
- color: var(--global--color-foreground);
- }
- .has-background-dark-background-color[class] {
- background-color: var(--global--color-background-dark);
- color: var(--global--color-foreground);
- }
- .has-background-background-color[class] {
- background-color: var(--global--color-background);
- color: var(--global--color-foreground);
- }
- .has-white-background-color[class] {
- background-color: var(--global--color-white);
- color: var(--global--color-secondary);
- }
- .has-black-background-color[class] {
- background-color: var(--global--color-black);
- color: var(--global--color-primary);
- }
- // Gutenberg Font-size utility classes
- .is-tiny-text,
- .has-tiny-font-size {
- font-size: var(--global--font-size-xs);
- }
- .is-small-text,
- .has-small-font-size {
- font-size: var(--global--font-size-sm);
- }
- .is-regular-text,
- .has-regular-font-size,
- .has-normal-font-size,
- .has-medium-font-size {
- font-size: var(--global--font-size-md);
- }
- .is-large-text,
- .has-large-font-size {
- font-size: var(--global--font-size-lg);
- line-height: var(--global--line-height-heading);
- }
- .is-larger-text,
- .has-larger-font-size,
- .has-huge-font-size {
- font-size: var(--global--font-size-xl);
- line-height: var(--global--line-height-heading);
- }
- // Drop cap
- .has-drop-cap:not(:focus)::first-letter {
- font-family: var(--heading--font-family);
- font-size: calc(2 * var(--heading--font-size-h1));
- font-weight: var(--heading--font-weight);
- }
- /**
- * Spacing Overrides
- */
- @import "spacing-overrides";
- [data-block] {
- margin-top: var(--global--spacing-vertical);
- margin-bottom: var(--global--spacing-vertical);
- }
- /*
- * Custom gradients
- */
- .has-hard-diagonal-gradient-background {
- background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
- }
- .has-hard-diagonal-inverted-gradient-background {
- background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
- }
- .has-diagonal-gradient-background {
- background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
- }
- .has-diagonal-inverted-gradient-background {
- background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
- }
- .has-hard-horizontal-gradient-background {
- background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
- }
- .has-hard-horizontal-inverted-gradient-background {
- background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
- }
- .has-horizontal-gradient-background {
- background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
- }
- .has-horizontal-inverted-gradient-background {
- background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
- }
- .has-stripe-gradient-background {
- background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
- }
- /* Block Alignments */
- .wp-block {
- // Gutenberg injects a rule that limits the max width of .wp-block to 580px
- // This line overrides it to use the responsive spacing rules for default width content
- max-width: var(--responsive--aligndefault-width);
- // Use the theme's max-width for wide alignment.
- &[data-align="wide"],
- &.alignwide {
- max-width: var(--responsive--alignwide-width);
- }
- &[data-align="full"],
- &.alignfull {
- max-width: none;
- }
- }
- // Selects the post editor and not the site editor
- .block-editor-block-list__layout:not(.edit-site-block-editor__block-list){
- .wp-block {
- &[data-align="full"],
- &.alignfull {
- &>[data-block] {
- margin-top: 0;
- margin-bottom: 0;
- }
- }
- }
- }
- .alignleft {
- margin: 0;
- margin-right: var(--global--spacing-horizontal);
- }
- .alignright {
- margin: 0;
- margin-left: var(--global--spacing-horizontal);
- }
|