style-editor.scss (18575B)
1 /*! 2 Twenty Nineteen Editor Styles 3 */ 4 5 /** === Includes === */ 6 7 @import "sass/variables-site/variables-site"; 8 @import "sass/mixins/mixins-master"; 9 10 /** === Editor Frame === */ 11 12 body { 13 14 .wp-block[data-align="full"], 15 .wp-block.alignfull { 16 max-width: calc(100% + 16px); 17 width: calc(100% + 16px); 18 } 19 20 .wp-block[data-align="left"], 21 .wp-block.alignleft { 22 margin-right: $size__spacing-unit; 23 width: inherit; 24 } 25 26 .wp-block[data-align="right"], 27 .wp-block.alignright { 28 margin-left: $size__spacing-unit; 29 width: inherit; 30 } 31 32 .wp-block[data-align="center"], 33 .wp-block.aligncenter { 34 margin-left: 0; 35 } 36 37 @include media(tablet) { 38 39 .block-editor-writing-flow { 40 max-width: 80%; 41 margin: 0 10%; 42 } 43 44 .block-editor-default-block-appender, 45 .block-editor-block-list__block { 46 margin-left: 0; 47 margin-right: 0; 48 } 49 50 .wp-block[data-align="wide"], 51 .wp-block.alignwide { 52 width: 100%; 53 } 54 55 .wp-block[data-align="full"], 56 .wp-block.alignfull { 57 width: calc(125% + 16px); 58 max-width: calc(125% + 16px); 59 position: relative; 60 left: -12.5%; 61 } 62 63 .wp-block[data-align="wide"] .wp-block[data-align="full"], 64 .wp-block[data-align="full"] .wp-block[data-align="full"], 65 .wp-block.alignwide .wp-block.alignfull, 66 .wp-block.alignfull .wp-block.alignfull { 67 left: 0; 68 margin-left: 0; 69 margin-right: 0; 70 } 71 } 72 } 73 74 /** === Content Width === */ 75 76 .wp-block { 77 max-width: 100%; 78 79 @include media(tablet) { 80 width: calc(8 * (100vw / 12)); 81 } 82 83 @include media(desktop) { 84 width: calc(6 * (100vw / 12 )); 85 } 86 87 // Only the top level blocks need specific widths, therefore override for every nested block. 88 .wp-block { 89 width: initial; 90 } 91 } 92 93 /** === Base Typography === */ 94 95 body { 96 font-size: $font__size_base; 97 @include font-family( $font__body ); 98 line-height: $font__line-height-body; 99 color: $color__text-main; 100 } 101 102 p { 103 font-size: $font__size_base; 104 } 105 106 h1, 107 h2, 108 h3, 109 h4, 110 h5, 111 h6 { 112 @include font-family( $font__heading ); 113 font-weight: 700; 114 } 115 116 h1 { 117 font-size: $font__size-xl; 118 @include post-section-dash; 119 120 @include media(tablet) { 121 font-size: $font__size-xxl; 122 } 123 } 124 125 h2 { 126 font-size: $font__size-lg; 127 @include post-section-dash; 128 129 @include media(tablet) { 130 font-size: $font__size-xl; 131 } 132 } 133 134 h3 { 135 font-size: $font__size-lg; 136 } 137 138 h4 { 139 font-size: $font__size-md; 140 } 141 142 h5 { 143 font-size: $font__size-sm; 144 } 145 146 h6 { 147 font-size: $font__size-xs; 148 } 149 150 a { 151 @include link-transition; 152 color: $color__link; 153 154 &:hover, 155 &:active { 156 color: $color__link-hover; 157 outline: 0; 158 text-decoration: none; 159 } 160 161 &:focus { 162 outline: 0; 163 text-decoration: underline; 164 } 165 } 166 167 // Use white text against these backgrounds by default. 168 .has-primary-background-color, 169 .has-secondary-background-color, 170 .has-dark-gray-background-color, 171 .has-light-gray-background-color { 172 color: $color__background-body; 173 174 p, 175 h1, 176 h2, 177 h3, 178 h4, 179 h5, 180 h6, 181 a { 182 color: $color__background-body; 183 } 184 } 185 186 // Use dark gray text against this background by default. 187 .has-white-background-color { 188 color: $color__text-main; 189 190 p, 191 h1, 192 h2, 193 h3, 194 h4, 195 h5, 196 h6, 197 a { 198 color: $color__text-main; 199 } 200 } 201 202 figcaption, 203 .gallery-caption { 204 @include font-family( $font__heading ); 205 font-size: $font__size-xs; 206 line-height: 1.6; 207 color: $color__text-light; 208 } 209 210 /** === Post Title === */ 211 212 .editor-post-title__block { 213 width: 100%; 214 @include post-section-dash; 215 216 &:before { 217 width: $font__size-xxl; 218 margin-top: 0; 219 margin-bottom: 0; 220 margin-left: 1rem; 221 position: relative; 222 top: 0.5em; 223 224 @include media(mobile) { 225 margin-left: 0; 226 } 227 } 228 229 .editor-post-title__input { 230 @include font-family( $font__heading ); 231 font-size: $font__size-xxl; 232 font-weight: 700; 233 } 234 } 235 236 /** === Default Appender === */ 237 238 .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { 239 @include font-family( $font__body ); 240 font-size: $font__size_base; 241 } 242 243 /** === Heading === */ 244 245 .wp-block-heading { 246 strong { 247 font-weight: bolder; 248 } 249 } 250 /** === Paragraph === */ 251 252 .wp-block-paragraph { 253 254 &.has-drop-cap:not(:focus)::first-letter { 255 @include font-family( $font__heading ); 256 font-size: $font__size-xxxl; 257 line-height: 1; 258 font-weight: bold; 259 margin: 0 0.25em 0 0; 260 261 @-moz-document url-prefix() { 262 & { 263 margin-top: 0.2em; 264 } 265 } 266 } 267 } 268 269 /** === Table === */ 270 271 .wp-block-table { 272 @include font-family( $font__heading ); 273 } 274 275 /** === Cover === */ 276 277 .wp-block-cover { 278 279 h2, 280 .wp-block-cover-text { 281 @include font-family( $font__heading ); 282 font-size: $font__size-lg; 283 font-weight: bold; 284 line-height: 1.4; 285 padding-left: $size__spacing-unit; 286 padding-right: $size__spacing-unit; 287 288 strong { 289 font-weight: bolder; 290 } 291 292 @include media(tablet) { 293 margin-left: auto; 294 margin-right: auto; 295 padding: 0; 296 } 297 } 298 299 @include media(tablet) { 300 padding-left: 10%; 301 padding-right: 10%; 302 303 h2, 304 .wp-block-cover-text { 305 font-size: $font__size-xl; 306 } 307 } 308 } 309 310 .wp-block[data-type="core/cover"][data-align="left"], 311 .wp-block[data-type="core/cover"][data-align="right"] { 312 313 .editor-block-list__block-edit { 314 width: calc(4 * (100vw / 12)); 315 } 316 317 .wp-block-cover { 318 width: 100%; 319 max-width: 100%; 320 padding: calc(1.375 * #{$size__spacing-unit}); 321 322 p { 323 padding-left: 0; 324 padding-right: 0; 325 } 326 327 @include media(tablet) { 328 padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); 329 } 330 } 331 } 332 333 .wp-block[data-type="core/cover"][data-align="wide"], 334 .wp-block[data-type="core/cover"][data-align="full"] { 335 336 @include media(tablet) { 337 338 h2, 339 .wp-block-cover-text { 340 max-width: calc(8 * (100vw / 12)); 341 } 342 } 343 344 @include media(desktop) { 345 346 h2, 347 .wp-block-cover-text { 348 max-width: calc(6 * (100vw / 12)); 349 } 350 } 351 } 352 353 .wp-block[data-type="core/cover"][data-align="full"] { 354 355 @include media(tablet) { 356 357 .wp-block-cover { 358 padding-left: calc(10% + 64px); 359 padding-right: calc(10% + 64px); 360 } 361 } 362 } 363 364 /** === Gallery === */ 365 366 .wp-block-gallery { 367 368 .blocks-gallery-image figcaption, 369 .blocks-gallery-item figcaption, 370 .gallery-item .gallery-caption { 371 font-size: $font__size-xs; 372 line-height: 1.6; 373 } 374 } 375 376 /** === Button === */ 377 378 .wp-block-button { 379 380 .wp-block-button__link { 381 line-height: 1.8; 382 @include font-family( $font__heading ); 383 font-size: $font__size-sm; 384 font-weight: bold; 385 386 &:not(.has-text-color) { 387 color: #fff; 388 } 389 } 390 391 &:not(.is-style-outline) .wp-block-button__link { 392 background: $color__background-button; 393 } 394 395 &:not(.is-style-squared) .wp-block-button__link { 396 border-radius: 5px; 397 } 398 399 &.is-style-outline, 400 &.is-style-outline:hover, 401 &.is-style-outline:focus, 402 &.is-style-outline:active { 403 background: transparent; 404 color: $color__background-button; 405 406 .wp-block-button__link { 407 background: transparent; 408 409 &:not(.has-text-color) { 410 color: $color__background-button; 411 } 412 } 413 } 414 } 415 416 /** === Blockquote === */ 417 418 .wp-block-quote { 419 420 &:not(.is-large):not(.is-style-large) { 421 border-width: 2px; 422 border-color: $color__link; 423 } 424 425 &.is-large, 426 &.is-style-large { 427 margin-top: $font__size-xxl; 428 margin-bottom: $font__size-xxl; 429 } 430 431 &.is-large p, 432 &.is-style-large p { 433 font-size: $font__size-lg; 434 line-height: 1.3; 435 margin-bottom: 0.5em; 436 margin-top: 0.5em; 437 } 438 439 cite, 440 footer, 441 .wp-block-quote__citation { 442 @include font-family( $font__heading ); 443 font-size: $font__size-xs; 444 line-height: 1.6; 445 color: $color__text-light; 446 } 447 } 448 449 /** === Pullquote === */ 450 451 .wp-block-pullquote { 452 border-color: transparent; 453 border-width: 2px; 454 color: #000; 455 456 blockquote { 457 margin-top: calc(3 * #{ $size__spacing-unit}); 458 margin-bottom: calc(3.33 * #{ $size__spacing-unit}); 459 hyphens: auto; 460 word-break: break-word; 461 } 462 463 &:not(.is-style-solid-color) .wp-block-pullquote__citation { 464 color: $color__text-light; 465 } 466 467 &.is-style-solid-color { 468 469 blockquote { 470 width: calc(100% - (2 * #{ $size__spacing-unit})); 471 max-width: calc( 100% - (2 * #{ $size__spacing-unit})); 472 473 a, 474 &.has-text-color p, 475 &.has-text-color a { 476 color: inherit; 477 } 478 479 &:not(.has-text-color) { 480 color: $color__background-body; 481 } 482 483 @include media(tablet) { 484 max-width: 80%; 485 } 486 } 487 488 &:not(.has-background-color) { 489 background-color: $color__link; 490 } 491 } 492 } 493 494 .wp-block-pullquote[data-type="core/pullquote"], 495 .wp-block[data-type="core/pullquote"], 496 .wp-block[data-type="core/pullquote"][data-align="left"], 497 .wp-block[data-type="core/pullquote"][data-align="right"] { 498 499 blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, 500 blockquote > .editor-rich-text p, 501 p { 502 font-size: $font__size-lg; 503 font-style: italic; 504 line-height: 1.3; 505 margin-bottom: 0.5em; 506 margin-top: 0.5em; 507 508 @include media(tablet) { 509 font-size: $font__size-xl; 510 } 511 } 512 513 .wp-block-pullquote__citation { 514 @include font-family( $font__heading ); 515 font-size: $font__size-xs; 516 line-height: 1.6; 517 text-transform: none; 518 } 519 520 em { 521 font-style: normal; 522 } 523 } 524 525 .wp-block[data-align="left"] > .wp-block-pullquote, 526 .wp-block[data-align="right"] > .wp-block-pullquote { 527 max-width: 50%; 528 text-align: inherit; 529 530 &:not(.is-style-solid-color) { 531 padding: 0; 532 } 533 534 &.is-style-solid-color { 535 padding: 1em; 536 } 537 } 538 539 .wp-block[data-type="core/pullquote"][data-align="left"], 540 .wp-block[data-type="core/pullquote"][data-align="right"] { 541 542 .editor-block-list__block-edit { 543 width: calc(4 * (100vw / 12)); 544 max-width: 50%; 545 546 .wp-block-pullquote:not(.is-style-solid-color) { 547 padding: 0; 548 } 549 550 .wp-block-pullquote.is-style-solid-color { 551 padding: 1em; 552 } 553 } 554 555 blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, 556 blockquote > .editor-rich-text p, 557 p, 558 .wp-block-pullquote__citation { 559 text-align: left; 560 } 561 } 562 563 .wp-block[data-type="core/pullquote"][data-align="full"] { 564 565 @include media(tablet) { 566 567 .wp-block-pullquote blockquote { 568 max-width: calc(80% - 128px); 569 } 570 } 571 } 572 573 574 /** === File === */ 575 576 .wp-block-file { 577 @include font-family( $font__heading ); 578 579 .wp-block-file__textlink { 580 text-decoration: underline; 581 color: $color__link; 582 583 &:hover { 584 color: $color__link-hover; 585 text-decoration: none; 586 } 587 } 588 589 .wp-block-file__button { 590 display: table; 591 line-height: 1.8; 592 font-size: $font__size-sm; 593 font-weight: bold; 594 background-color: $color__link; 595 border-radius: 5px; 596 } 597 598 .wp-block-file__button-richtext-wrapper { 599 display: block; 600 margin-top: calc(0.75 * #{$size__spacing-unit}); 601 margin-left: 0; 602 } 603 604 } 605 606 /** === Verse === */ 607 608 .wp-block-verse, 609 .wp-block-verse pre { 610 padding: 0; 611 } 612 613 /** === Code === */ 614 615 .wp-block-code { 616 border-radius: 0; 617 } 618 619 /** === Table === */ 620 621 .wp-block-table { 622 623 td, th { 624 border-color: $color__text-light; 625 } 626 } 627 628 /** === Separator === */ 629 630 .wp-block-separator { 631 632 &:not(.is-style-dots) { 633 background-color: $color__text-light; 634 height: 2px; 635 } 636 637 &:not(.is-style-wide):not(.is-style-dots) { 638 width: $font__size-xl; 639 margin-left: 0; 640 } 641 642 &.is-style-dots { 643 color: $color__text-light; 644 } 645 646 &.is-style-dots:before { 647 font-size: $font__size-lg; 648 letter-spacing: calc(2 * #{$size__spacing-unit}); 649 padding-left: calc(2 * #{$size__spacing-unit}); 650 } 651 } 652 653 /* Remove duplicate rule-line when a separator 654 * is followed by an H1, or H2 */ 655 .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before, 656 .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before { 657 display: none; 658 } 659 660 /** === Latest Posts, Archives, Categories === */ 661 662 ul.wp-block-archives, 663 .wp-block-categories, 664 .wp-block-latest-posts { 665 padding: 0; 666 list-style-type: none; 667 668 ul { 669 padding: 0; 670 list-style-type: none; 671 } 672 673 li { 674 675 > a { 676 @include font-family( $font__heading ); 677 font-size: calc(#{$font__size_base} * #{$font__size-ratio}); 678 font-weight: bold; 679 line-height: $font__line-height-heading; 680 text-decoration: none; 681 } 682 683 ul { 684 padding-left: $size__spacing-unit; 685 } 686 } 687 } 688 689 .wp-block-categories { 690 691 ul { 692 padding-top: ( .75 * $size__spacing-unit ); 693 @include nestedSubMenuPadding(); 694 } 695 696 li ul { 697 list-style: none; 698 padding-left: 0; 699 margin-bottom: ( -.75 * $size__spacing-unit ); 700 } 701 702 } 703 704 /** === Latest Posts === */ 705 .wp-block-latest-posts { 706 707 .wp-block-latest-posts__post-date { 708 @include font-family( $font__heading ); 709 font-size: $font__size-xs; 710 color: $color__text-light; 711 line-height: 1.2; 712 } 713 714 .wp-block-latest-posts__post-full-content, 715 .wp-block-latest-posts__post-excerpt { 716 margin-top: $font__size_base; 717 margin-bottom: $font__size_base; 718 719 > div > p:first-child { 720 margin-top: $font__size_base; 721 } 722 } 723 724 li { 725 padding-bottom: ( .5 * $size__spacing-unit ); 726 727 &.menu-item-has-children, 728 &:last-child { 729 padding-bottom: 0; 730 } 731 732 :not(:last-child) .wp-block-latest-posts__post-excerpt { 733 padding-bottom: ( .5 * $size__spacing-unit ); 734 } 735 } 736 737 &.is-grid { 738 li { 739 border-top: 2px solid $color__border; 740 padding-top: (1 * $size__spacing-unit); 741 margin-bottom: (2 * $size__spacing-unit); 742 a { 743 &:after { 744 content: ''; 745 } 746 } 747 &:last-child { 748 margin-bottom: auto; 749 a:after { 750 content: ''; 751 } 752 } 753 } 754 } 755 } 756 757 /** === Latest Comments === */ 758 759 .wp-block-latest-comments { 760 761 .wp-block-latest-comments__comment-meta { 762 @include font-family( $font__heading ); 763 font-weight: bold; 764 765 .wp-block-latest-comments__comment-date { 766 font-weight: normal; 767 } 768 } 769 770 .wp-block-latest-comments__comment, 771 .wp-block-latest-comments__comment-date, 772 .wp-block-latest-comments__comment-excerpt p { 773 font-size: inherit; 774 } 775 776 .wp-block-latest-comments__comment-date { 777 font-size: $font__size-xs; 778 } 779 } 780 781 /** === Classic Editor === */ 782 783 /* Properly center-align captions in the classic-editor block */ 784 .wp-caption { 785 dd { 786 color: $color__text-light; 787 font-size: $font__size-xs; 788 @include font-family( $font__heading ); 789 line-height: $font__line-height-pre; 790 margin: 0; 791 padding: ( $size__spacing-unit * .5 ); 792 text-align: left; 793 text-align: center; 794 -webkit-margin-start: 0px; 795 margin-inline-start: 0px; 796 } 797 } 798 799 .wp-block-freeform { 800 801 /* Add style for galleries in classic-editor block */ 802 blockquote { 803 border-left: 2px solid $color__link; 804 805 cite { 806 @include font-family( $font__heading ); 807 font-size: $font__size-xs; 808 font-style: normal; 809 line-height: 1.6; 810 color: $color__text-light; 811 } 812 } 813 } 814 815 /** === Group Block === */ 816 817 // This matches the 22px value for 1rem that used on the front end. 818 // It must be specified in pixels for the editor, since the root font 819 // size is different here. 820 $group-block-background__padding: $font__size_base; 821 822 .wp-block-group { 823 824 // Child: Full alignment 825 > .wp-block-group__inner-container > .wp-block[data-align="full"], 826 > .wp-block-group__inner-container > .wp-block.alignfull { 827 margin-left: 0; 828 margin-right: 0; 829 left: 0; 830 } 831 832 // Group block with background color 833 &.has-background { 834 padding: $group-block-background__padding; 835 836 // Child: Full alignment 837 > .wp-block-group__inner-container > .wp-block[data-align="full"], 838 > .wp-block-group__inner-container > .wp-block.alignfull { 839 margin-left: -$group-block-background__padding; 840 width: calc(100% + #{$group-block-background__padding * 2}); 841 max-width: calc(100% + #{$group-block-background__padding * 2}); 842 } 843 } 844 } 845 846 // Wide and full alignments 847 .wp-block[data-align="wide"] > .wp-block-group { 848 849 > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) { 850 @include media(tablet) { 851 width: calc(8 * (100vw / 12)); 852 } 853 854 @include media(desktop) { 855 width: calc(6 * (100vw / 12 )); 856 } 857 } 858 859 // Child blocks: Full alignment 860 > .wp-block-group__inner-container > .wp-block[data-align="full"], 861 > .wp-block-group__inner-container > .wp-block.alignfull { 862 padding-left: 0; 863 padding-right: 0; 864 } 865 866 867 // Group block with background color 868 &.has-background { 869 870 // Child blocks: Default alignments 871 > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) { 872 @include media(tablet) { 873 width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2}); 874 } 875 876 @include media(desktop) { 877 width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2}); 878 } 879 } 880 } 881 } 882 883 // Full alignment 884 .wp-block[data-align="full"] > .wp-block-group { 885 886 // Margins & padding are added to this container to mimic 887 // the style + spacing of the .editor-writing-flow global 888 // container. This way, child items sync up with the placement 889 // and size of other top-level blocks. 890 > .wp-block-group__inner-container { 891 892 // 2px of extra padding are added to each side here 893 // To better match up with the spacing of the whole 894 // document. 895 @include media(tablet) { 896 width: 80%; 897 margin-left: 10%; 898 margin-right: 10%; 899 padding-left: 10px; 900 padding-right: 10px; 901 } 902 903 // Child blocks: Normal Alignments 904 > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) { 905 906 @include media(tablet) { 907 max-width: calc(8 * (100vw / 12)); 908 } 909 910 @include media(desktop) { 911 max-width: calc(6 * (100vw / 12)); 912 } 913 } 914 915 // Child blocks: Not Full Alignments 916 > .wp-block:not([data-align="full"]):not(.alignfull) { 917 padding-left: 10px; 918 padding-right: 10px; 919 920 @include media(tablet) { 921 padding-left: 0; 922 padding-right: 0; 923 } 924 } 925 926 // Child blocks: Right alignments 927 > .wp-block[data-align="right"] { 928 929 @include media(tablet) { 930 max-width: 125%; 931 } 932 } 933 934 // Child blocks: Wide alignments 935 > .wp-block[data-align="wide"], 936 > .wp-block.alignwide { 937 938 @include media(tablet) { 939 width: 100%; 940 max-width: 100%; 941 } 942 } 943 944 // Child blocks: Full alignments 945 > .wp-block[data-align=full], 946 > .wp-block.alignfull { 947 948 @include media(tablet) { 949 left: calc( -12.5% - 13px ); 950 width: calc( 125% + 26px ); 951 max-width: calc( 125% + 25px ); 952 } 953 } 954 } 955 956 // Group block with background color 957 &.has-background { 958 959 // When the Group block is full width, we can remove the left/right padding. 960 padding: $group-block-background__padding 0; 961 962 @include media(mobile) { 963 padding-left: 0; 964 padding-right: 0; 965 } 966 967 // Child blocks: Full alignment 968 > .wp-block-group__inner-container > .wp-block[data-align="full"], 969 > .wp-block-group__inner-container > .wp-block.alignfull { 970 margin-left: 0; 971 width: 100%; 972 973 @include media(mobile) { 974 width: calc(100% + 92px); 975 } 976 977 @include media(tablet) { 978 width: calc(125% + 120px); 979 } 980 } 981 } 982 } 983 984 .wp-block-post-template { 985 986 .wp-block[data-align="full"], 987 .wp-block.alignfull { 988 left: 0; 989 max-width: 100%; 990 padding-left: 0; 991 padding-right: 0; 992 width: 100%; 993 } 994 }