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