[Summary view] [Print] [Text view]

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