Ticket #61904: 61904.patch
| File 61904.patch, 11.7 KB (added by , 16 months ago) |
|---|
-
wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
1 1 /* !Block styles */ 2 2 3 4 3 // Default block margin and alignment rules. 5 4 // These are replicated inside of the Group block 6 5 // so that child blocks in there appear the same way. … … 30 29 31 30 &.alignfull { 32 31 position: relative; 33 left: -#{$size__spacing-unit 34 width: calc( 35 max-width: calc( 32 left: -#{$size__spacing-unit}; 33 width: calc(100% + (2 * #{$size__spacing-unit})); 34 max-width: calc(100% + (2 * #{$size__spacing-unit})); 36 35 clear: both; 37 36 38 37 @include media(tablet) { 39 38 margin-top: calc(2 * #{$size__spacing-unit}); 40 39 margin-bottom: calc(2 * #{$size__spacing-unit}); 41 left: calc( -12.5% - 75px);42 width: calc( 125% + 150px);43 max-width: calc( 125% + 150px);40 left: calc(-12.5% - 75px); 41 width: calc(125% + 150px); 42 max-width: calc(125% + 150px); 44 43 } 45 44 } 46 45 … … 91 90 92 91 .entry .entry-content > *, 93 92 .entry .entry-summary > * { 94 95 93 > *:first-child { 96 94 margin-top: 0; 97 95 } … … 108 106 */ 109 107 .entry .entry-content, 110 108 .entry .entry-summary { 111 112 109 .entry-content, 113 110 .entry-summary, 114 111 .entry { … … 125 122 } 126 123 127 124 .entry .entry-content { 128 129 125 //! Paragraphs 130 126 p.has-background { 131 127 padding: 20px 30px; … … 133 129 134 130 //! Audio 135 131 .wp-block-audio { 136 137 132 width: 100%; 138 133 139 134 audio { … … 142 137 143 138 &.alignleft audio, 144 139 &.alignright audio { 145 146 140 max-width: (0.33 * $mobile_width); 147 141 148 142 @include media(tablet) { … … 157 151 158 152 //! Video 159 153 .wp-block-video { 160 161 154 video { 162 155 width: 100%; 163 156 } … … 165 158 166 159 //! Button 167 160 .wp-block-button { 168 169 161 .wp-block-button__link { 170 162 @include button-transition; 171 163 border: none; 172 164 font-size: $font__size-sm; 173 @include font-family( $font__heading);165 @include font-family($font__heading); 174 166 line-height: $font__line-height-heading; 175 167 box-sizing: border-box; 176 168 font-weight: bold; 177 169 text-decoration: none; 178 padding: ($size__spacing-unit * .76) $size__spacing-unit;170 padding: ($size__spacing-unit * 0.76) $size__spacing-unit; 179 171 outline: none; 180 172 outline: none; 181 173 … … 239 231 list-style: none; 240 232 241 233 li > a { 242 @include font-family( $font__heading);234 @include font-family($font__heading); 243 235 font-size: calc(#{$font__size_base} * #{$font__size-ratio}); 244 236 font-weight: bold; 245 237 line-height: $font__line-height-heading; … … 249 241 250 242 .wp-block-archives, 251 243 .wp-block-categories { 252 253 244 &.aligncenter { 254 245 text-align: center; 255 246 } … … 257 248 258 249 //! Latest categories 259 250 .wp-block-categories { 260 261 251 ul { 262 padding-top: ( .75 * $size__spacing-unit);252 padding-top: (0.75 * $size__spacing-unit); 263 253 } 264 254 265 255 li ul { … … 272 262 273 263 //! Latest posts 274 264 .wp-block-latest-posts { 275 276 265 .wp-block-latest-posts__post-date { 277 @include font-family( $font__heading);266 @include font-family($font__heading); 278 267 font-size: $font__size-xs; 279 268 color: $color__text-light; 280 269 line-height: 1.2; … … 287 276 } 288 277 289 278 li { 290 padding-bottom: ( .5 * $size__spacing-unit);279 padding-bottom: (0.5 * $size__spacing-unit); 291 280 292 281 &.menu-item-has-children, 293 282 &:last-child { … … 295 284 } 296 285 297 286 :not(:last-child) .wp-block-latest-posts__post-excerpt { 298 padding-bottom: ( .5 * $size__spacing-unit);287 padding-bottom: (0.5 * $size__spacing-unit); 299 288 } 300 289 } 301 290 … … 305 294 margin-bottom: (2 * $size__spacing-unit); 306 295 a { 307 296 &:after { 308 content: '';297 content: ""; 309 298 } 310 299 } 311 300 &:last-child { 312 301 margin-bottom: auto; 313 302 a:after { 314 content: '';303 content: ""; 315 304 } 316 305 } 317 306 } … … 326 315 327 316 //! Verse 328 317 .wp-block-verse { 329 @include font-family( $font__body);318 @include font-family($font__body); 330 319 font-size: $font__size_base; 331 320 line-height: 1.8; 332 321 } … … 334 323 //! Paragraphs 335 324 .has-drop-cap { 336 325 &:not(:focus):first-letter { 337 @include font-family( $font__heading);326 @include font-family($font__heading); 338 327 font-size: $font__size-xxxl; 339 328 line-height: 1; 340 329 font-weight: bold; 341 330 margin: 0 0.25em 0 0; 342 331 343 @-moz-document url-prefix() 332 @-moz-document url-prefix() { 344 333 & { 345 334 margin-top: 0.2em; 346 335 } … … 357 346 358 347 blockquote { 359 348 border: none; 360 margin-top: calc(4 * #{ 361 margin-bottom: calc(4.33 * #{ 349 margin-top: calc(4 * #{$size__spacing-unit}); 350 margin-bottom: calc(4.33 * #{$size__spacing-unit}); 362 351 margin-right: 0; 363 352 padding-left: 0; 364 353 } … … 381 370 382 371 cite { 383 372 display: inline-block; 384 @include font-family( $font__heading);373 @include font-family($font__heading); 385 374 line-height: 1.6; 386 375 text-transform: none; 387 376 color: $color__text-light; … … 464 453 465 454 &.alignright, 466 455 &.alignleft { 467 468 456 @include media(tablet) { 469 457 padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); 470 458 } … … 471 459 } 472 460 473 461 &.alignfull { 474 475 462 @include media(tablet) { 476 463 padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); 477 464 padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); … … 482 469 483 470 //! Blockquote 484 471 .wp-block-quote { 485 486 472 &:not(.is-large), 487 473 &:not(.is-style-large) { 488 474 border-width: 2px; … … 545 531 display: block; 546 532 } 547 533 548 // If an image does not have a left/center/right alignment, 549 // it's a direct child of .wp-block-image. If it has no other 550 // alignment added, we want to make sure the image and its 534 // If an image does not have a left/center/right alignment, 535 // it's a direct child of .wp-block-image. If it has no other 536 // alignment added, we want to make sure the image and its 551 537 // caption do not extend beyond the width of the text column. 552 538 &:not(.alignwide):not(.alignfull) > img, 553 539 &:not(.alignwide):not(.alignfull) > a > img, … … 557 543 } 558 544 559 545 .aligncenter { 560 561 546 @include postContentMaxWidth(); 562 547 563 548 @include media(tablet) { … … 580 565 581 566 &.alignfull img { 582 567 width: 100vw; 583 max-width: calc( 568 max-width: calc(100% + (2 * #{$size__spacing-unit})); 584 569 585 570 @include media(tablet) { 586 max-width: calc( 125% + 150px);571 max-width: calc(125% + 150px); 587 572 margin-left: auto; 588 573 margin-right: auto; 589 574 } … … 604 589 .wp-block-cover-image-text, 605 590 .wp-block-cover-text, 606 591 h2 { 607 @include font-family( $font__heading);592 @include font-family($font__heading); 608 593 font-size: $font__size-lg; 609 594 font-weight: bold; 610 595 line-height: 1.25; … … 627 612 } 628 613 629 614 &.alignfull { 630 631 615 .wp-block-cover-image-text, 632 616 .wp-block-cover-text, 633 617 h2 { … … 669 653 .wp-block-gallery .blocks-gallery-image figcaption, 670 654 .wp-block-gallery .blocks-gallery-item figcaption { 671 655 font-size: $font__size-xs; 672 @include font-family( $font__heading);656 @include font-family($font__heading); 673 657 line-height: $font__line-height-pre; 674 658 margin: 0; 675 padding: ( $size__spacing-unit * .5);659 padding: ($size__spacing-unit * 0.5); 676 660 text-align: center; 677 661 } 678 662 … … 721 705 * is followed by an H1, or H2 */ 722 706 & + h1, 723 707 & + h2 { 724 725 708 &:before { 726 709 display: none; 727 710 } … … 735 718 736 719 //! Table 737 720 .wp-block-table { 738 739 721 th, 740 722 td { 741 723 border-color: $color__text-light; … … 744 726 745 727 //! File 746 728 .wp-block-file { 747 @include font-family( $font__heading);729 @include font-family($font__heading); 748 730 749 731 .wp-block-file__button { 750 732 display: table; … … 753 735 border-radius: 5px; 754 736 background: $color__background-button; 755 737 font-size: $font__size-base; 756 @include font-family( $font__heading);738 @include font-family($font__heading); 757 739 line-height: $font__line-height-heading; 758 740 text-decoration: none; 759 741 font-weight: bold; 760 padding: ($size__spacing-unit * .75) $size__spacing-unit;742 padding: ($size__spacing-unit * 0.75) $size__spacing-unit; 761 743 color: #fff; 762 744 margin-left: 0; 763 745 margin-top: calc(0.75 * #{$size__spacing-unit}); … … 764 746 765 747 @include media(desktop) { 766 748 font-size: $font__size-base; 767 padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5);749 padding: ($size__spacing-unit * 0.875) ($size__spacing-unit * 1.5); 768 750 } 769 751 770 752 &:hover { … … 793 775 794 776 //! Columns 795 777 .wp-block-columns { 796 797 778 .wp-block-column > * { 798 799 779 &:first-child { 800 780 margin-top: 0; 801 781 } … … 810 790 .wp-block-image:not(.alignwide):not(.alignfull) > a > img, 811 791 .wp-block-image > img:not(.alignwide):not(.alignfull), 812 792 .wp-block-image > figure { 813 814 793 @include media(tablet) { 815 794 max-width: 100%; 816 795 } … … 831 810 832 811 //! Group 833 812 .wp-block-group { 834 835 // When the Group block is standard/wide, we need to prevent full-aligned 813 // When the Group block is standard/wide, we need to prevent full-aligned 836 814 // child blocks from expanding out of their container. 837 815 &:not(.alignfull) > .wp-block-group__inner-container > .alignfull, 838 816 &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img { 839 840 817 @include media(tablet) { 841 818 left: 0; 842 819 max-width: 100%; … … 845 822 846 823 // The full-width Group block's inner container should mimic .entry-content styles. 847 824 &.alignfull > .wp-block-group__inner-container { 848 max-width: calc(100% - (2 * #{ $size__spacing-unit}));825 max-width: calc(100% - (2 * #{$size__spacing-unit})); 849 826 margin: 0 $size__spacing-unit; 850 827 851 828 @include media(tablet) { … … 863 840 864 841 // Remove the top and bottom margins of inner blocks. 865 842 .wp-block-group__inner-container { 866 867 843 > *:first-child { 868 844 margin-top: 0; 869 845 } … … 873 849 } 874 850 } 875 851 876 // If the Group block is full-width, it does not need this extra padding. 852 // If the Group block is full-width, it does not need this extra padding. 877 853 &.alignfull { 878 854 padding-left: 0; 879 855 padding-right: 0; … … 888 864 &:not(.alignfull) > .wp-block-group__inner-container > .alignfull { 889 865 width: 100%; 890 866 max-width: 100%; 891 867 892 868 @include media(tablet) { 893 width: calc( 100% + #{$size__spacing-unit * 2});894 max-width: calc( 100% + #{$size__spacing-unit * 2});869 width: calc(100% + #{$size__spacing-unit * 2}); 870 max-width: calc(100% + #{$size__spacing-unit * 2}); 895 871 margin-left: -#{$size__spacing-unit}; 896 872 } 897 873 } 898 874 } 899 900 875 } 901 876 902 877 //! Latest Comments 903 878 .wp-block-latest-comments { 904 905 879 .wp-block-latest-comments__comment-meta { 906 @include font-family( $font__heading);880 @include font-family($font__heading); 907 881 font-weight: bold; 908 882 909 883 .wp-block-latest-comments__comment-date { … … 918 892 } 919 893 920 894 &.has-avatars { 921 922 895 } 923 896 924 897 &.has-dates { 925 926 898 .wp-block-latest-comments__comment-date { 927 899 font-size: $font__size-xs; 928 900 } … … 929 901 } 930 902 931 903 &.has-excerpts { 932 933 904 } 934 905 } 935 906 907 //! wp-block-social-links 908 .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor { 909 text-decoration: none; 910 } 911 936 912 //! Font Sizes 937 913 .has-small-font-size { 938 914 font-size: $font__size-sm; … … 955 931 .has-secondary-background-color, 956 932 .has-dark-gray-background-color, 957 933 .has-light-gray-background-color { 958 959 934 // Use white text against these backgrounds by default. 960 935 color: $color__background-body; 961 936 … … 1009 984 1010 985 .has-white-background-color, 1011 986 .wp-block-pullquote.is-style-solid-color.has-white-background-color { 1012 background-color: # FFF;987 background-color: #fff; 1013 988 } 1014 989 1015 990 //! Custom foreground colors … … 1043 1018 .has-white-color, 1044 1019 .wp-block-pullquote blockquote.has-white-color, 1045 1020 .wp-block-pullquote.is-style-solid-color blockquote.has-white-color { 1046 color: # FFF;1021 color: #fff; 1047 1022 } 1048 1023 }