wp/wp-includes/blocks/post-template/style.css
changeset 19 3d72ae0968f4
parent 18 be944660c56a
child 21 48c4eec2b7e6
equal deleted inserted replaced
18:be944660c56a 19:3d72ae0968f4
    39 /**
    39 /**
    40  * React Native specific.
    40  * React Native specific.
    41  * These variables do not appear to be used anywhere else.
    41  * These variables do not appear to be used anywhere else.
    42  */
    42  */
    43 /**
    43 /**
       
    44 *  Converts a hex value into the rgb equivalent.
       
    45 *
       
    46 * @param {string} hex - the hexadecimal value to convert
       
    47 * @return {string} comma separated rgb values
       
    48 */
       
    49 /**
    44  * Breakpoint mixins
    50  * Breakpoint mixins
    45  */
    51  */
    46 /**
    52 /**
    47  * Long content fade mixin
    53  * Long content fade mixin
    48  *
    54  *
    68 /**
    74 /**
    69  * Reset the WP Admin page styles for Gutenberg-like pages.
    75  * Reset the WP Admin page styles for Gutenberg-like pages.
    70  */
    76  */
    71 .wp-block-post-template,
    77 .wp-block-post-template,
    72 .wp-block-query-loop {
    78 .wp-block-query-loop {
       
    79   margin-top: 0;
       
    80   margin-bottom: 0;
    73   max-width: 100%;
    81   max-width: 100%;
    74   list-style: none;
    82   list-style: none;
    75   padding: 0;
    83   padding: 0;
    76 }
    84 }
    77 .wp-block-post-template li,
    85 .wp-block-post-template.wp-block-post-template,
    78 .wp-block-query-loop li {
    86 .wp-block-query-loop.wp-block-post-template {
    79   clear: both;
    87   background: none;
    80 }
    88 }
    81 .wp-block-post-template.is-flex-container,
    89 .wp-block-post-template.is-flex-container,
    82 .wp-block-query-loop.is-flex-container {
    90 .wp-block-query-loop.is-flex-container {
    83   flex-direction: row;
    91   flex-direction: row;
    84   display: flex;
    92   display: flex;
    85   flex-wrap: wrap;
    93   flex-wrap: wrap;
       
    94   gap: 1.25em;
    86 }
    95 }
    87 .wp-block-post-template.is-flex-container li,
    96 .wp-block-post-template.is-flex-container li,
    88 .wp-block-query-loop.is-flex-container li {
    97 .wp-block-query-loop.is-flex-container li {
    89   margin: 0 0 1.25em 0;
    98   margin: 0;
    90   width: 100%;
    99   width: 100%;
    91 }
   100 }
    92 @media (min-width: 600px) {
   101 @media (min-width: 600px) {
    93   .wp-block-post-template.is-flex-container li,
       
    94 .wp-block-query-loop.is-flex-container li {
       
    95     margin-right: 1.25em;
       
    96   }
       
    97   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
   102   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
    98 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
   103 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
    99     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   104     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   100   }
       
   101   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
       
   102 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
       
   103     margin-right: 0;
       
   104   }
   105   }
   105   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
   106   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
   106 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
   107 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
   107     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   108     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   108   }
   109   }
   109   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
       
   110 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
       
   111     margin-right: 0;
       
   112   }
       
   113   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
   110   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
   114 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
   111 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
   115     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   112     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   116   }
       
   117   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
       
   118 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
       
   119     margin-right: 0;
       
   120   }
   113   }
   121   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
   114   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
   122 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
   115 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
   123     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   116     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   124   }
   117   }
   125   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
       
   126 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
       
   127     margin-right: 0;
       
   128   }
       
   129   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
   118   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
   130 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
   119 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
   131     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   120     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   132   }
   121   }
   133   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
       
   134 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
       
   135     margin-right: 0;
       
   136   }
       
   137 }
   122 }