wp/wp-includes/blocks/columns/style-rtl.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  *
    70  */
    76  */
    71 .wp-block-columns {
    77 .wp-block-columns {
    72   display: flex;
    78   display: flex;
    73   margin-bottom: 1.75em;
    79   margin-bottom: 1.75em;
    74   box-sizing: border-box;
    80   box-sizing: border-box;
    75   flex-wrap: wrap;
    81   flex-wrap: wrap !important;
       
    82   align-items: initial !important;
    76   /**
    83   /**
    77   * All Columns Alignment
    84   * All Columns Alignment
    78   */
    85   */
    79 }
    86 }
    80 @media (min-width: 782px) {
    87 @media (min-width: 782px) {
    81   .wp-block-columns {
    88   .wp-block-columns {
    82     flex-wrap: nowrap;
    89     flex-wrap: nowrap !important;
    83   }
    90   }
    84 }
       
    85 .wp-block-columns.has-background {
       
    86   padding: 1.25em 2.375em;
       
    87 }
    91 }
    88 .wp-block-columns.are-vertically-aligned-top {
    92 .wp-block-columns.are-vertically-aligned-top {
    89   align-items: flex-start;
    93   align-items: flex-start;
    90 }
    94 }
    91 .wp-block-columns.are-vertically-aligned-center {
    95 .wp-block-columns.are-vertically-aligned-center {
    92   align-items: center;
    96   align-items: center;
    93 }
    97 }
    94 .wp-block-columns.are-vertically-aligned-bottom {
    98 .wp-block-columns.are-vertically-aligned-bottom {
    95   align-items: flex-end;
    99   align-items: flex-end;
    96 }
   100 }
       
   101 @media (max-width: 781px) {
       
   102   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
       
   103     flex-basis: 100% !important;
       
   104   }
       
   105 }
       
   106 @media (min-width: 782px) {
       
   107   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
       
   108     flex-basis: 0;
       
   109     flex-grow: 1;
       
   110   }
       
   111   .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] {
       
   112     flex-grow: 0;
       
   113   }
       
   114 }
       
   115 .wp-block-columns.is-not-stacked-on-mobile {
       
   116   flex-wrap: nowrap !important;
       
   117 }
       
   118 .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
       
   119   flex-basis: 0;
       
   120   flex-grow: 1;
       
   121 }
       
   122 .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*=flex-basis] {
       
   123   flex-grow: 0;
       
   124 }
       
   125 
       
   126 :where(.wp-block-columns.has-background) {
       
   127   padding: 1.25em 2.375em;
       
   128 }
    97 
   129 
    98 .wp-block-column {
   130 .wp-block-column {
    99   flex-grow: 1;
   131   flex-grow: 1;
   100   min-width: 0;
   132   min-width: 0;
   101   word-break: break-word;
   133   word-break: break-word;
   102   overflow-wrap: break-word;
   134   overflow-wrap: break-word;
   103   /**
   135   /**
   104   * Individual Column Alignment
   136   * Individual Column Alignment
   105   */
   137   */
   106 }
       
   107 @media (max-width: 599px) {
       
   108   .wp-block-column {
       
   109     flex-basis: 100% !important;
       
   110   }
       
   111 }
       
   112 @media (min-width: 600px) and (max-width: 781px) {
       
   113   .wp-block-column:not(:only-child) {
       
   114     flex-basis: calc(50% - 1em) !important;
       
   115     flex-grow: 0;
       
   116   }
       
   117   .wp-block-column:nth-child(even) {
       
   118     margin-right: 2em;
       
   119   }
       
   120 }
       
   121 @media (min-width: 782px) {
       
   122   .wp-block-column {
       
   123     flex-basis: 0;
       
   124     flex-grow: 1;
       
   125   }
       
   126   .wp-block-column[style*=flex-basis] {
       
   127     flex-grow: 0;
       
   128   }
       
   129   .wp-block-column:not(:first-child) {
       
   130     margin-right: 2em;
       
   131   }
       
   132 }
   138 }
   133 .wp-block-column.is-vertically-aligned-top {
   139 .wp-block-column.is-vertically-aligned-top {
   134   align-self: flex-start;
   140   align-self: flex-start;
   135 }
   141 }
   136 .wp-block-column.is-vertically-aligned-center {
   142 .wp-block-column.is-vertically-aligned-center {