[Summary view] [Print] [Text view]

   1  /* Block Alignments */
   2  
   3  /**
   4   * These selectors set the default max width for content appearing inside a post or page.
   5   */
   6  .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
   7  *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
   8      @extend %responsive-aligndefault-width;
   9  }
  10  
  11  /**
  12   * .alignleft
  13   */
  14  .alignleft {
  15  
  16      /*rtl:ignore*/
  17      text-align: left;
  18  
  19      margin-top: 0;
  20  }
  21  
  22  // Targeting the .entry-content class is necessary to ensure these styles
  23  // only apply when the block isn't nested.
  24  .entry-content > .alignleft {
  25      max-width: var(--responsive--aligndefault-width);
  26      @extend %responsive-alignleft;
  27  }
  28  
  29  @include media(mobile) {
  30  
  31      .alignleft {
  32  
  33          /*rtl:ignore*/
  34          float: left;
  35  
  36          /*rtl:ignore*/
  37          margin-right: var(--global--spacing-horizontal);
  38          margin-bottom: var(--global--spacing-vertical);
  39      }
  40  
  41      .entry-content > .alignleft {
  42          max-width: calc(50% - var(--responsive--alignleft-margin));
  43      }
  44  }
  45  
  46  /**
  47   * .aligncenter
  48   */
  49  .aligncenter {
  50      clear: both;
  51      display: block;
  52      float: none;
  53      margin-right: auto;
  54      margin-left: auto;
  55      text-align: center;
  56  }
  57  
  58  /**
  59   * .alignright
  60   */
  61  .alignright {
  62  
  63      margin-top: 0;
  64      margin-bottom: var(--global--spacing-vertical);
  65  }
  66  
  67  // Targeting the .entry-content class is necessary to ensure these styles
  68  // only apply when the block isn't nested.
  69  .entry-content > .alignright {
  70      max-width: var(--responsive--aligndefault-width);
  71      @extend %responsive-alignright;
  72  }
  73  
  74  @include media(mobile) {
  75  
  76      .alignright {
  77  
  78          /*rtl:ignore*/
  79          float: right;
  80  
  81          /*rtl:ignore*/
  82          margin-left: var(--global--spacing-horizontal);
  83      }
  84  
  85      .entry-content > .alignright {
  86          max-width: calc(50% - var(--responsive--alignright-margin));
  87      }
  88  }
  89  
  90  // Make sure siblings of floated elements are top-aligned when nested
  91  [class*="inner-container"] > .alignleft + *,
  92  [class*="inner-container"] > .alignright + * {
  93      margin-top: 0;
  94  }
  95  
  96  /**
  97   * .alignwide
  98   */
  99  .alignwide {
 100      clear: both;
 101      @extend %responsive-alignwide-width;
 102  }
 103  
 104  .alignwide [class*="inner-container"] > .alignwide {
 105      @extend %responsive-alignwide-width-nested;
 106  }
 107  
 108  /**
 109   * .alignfull
 110   */
 111  .alignfull {
 112      clear: both;
 113      @extend %responsive-alignfull-width-mobile;
 114      @extend %responsive-alignfull-width;
 115  }
 116  
 117  .alignfull [class*="inner-container"] > .alignwide {
 118      @extend %responsive-alignwide-width-nested;
 119  }
 120  
 121  // Content alignment
 122  .has-left-content {
 123      justify-content: flex-start;
 124  }
 125  
 126  .has-right-content {
 127      justify-content: flex-end;
 128  }
 129  
 130  // Parallax
 131  .has-parallax {
 132      background-attachment: fixed;
 133  }
 134  
 135  // Drop caps
 136  .has-drop-cap:not(:focus)::first-letter {
 137      font-family: var(--heading--font-family);
 138      font-weight: var(--heading--font-weight);
 139      line-height: 0.66;
 140      text-transform: uppercase;
 141      font-style: normal;
 142      float: left;
 143      margin: 0.1em 0.1em 0 0;
 144      font-size: calc(1.2 * var(--heading--font-size-h1));
 145  }
 146  
 147  .has-drop-cap:not(:focus)::after {
 148      content: "";
 149      display: table;
 150      clear: both;
 151      padding-top: 14px;
 152  }
 153  
 154  .desktop-only {
 155      display: none;
 156  
 157      @include media(mobile) {
 158          display: block;
 159      }
 160  }