WordPress.org

Make WordPress Core

Changeset 45264


Ignore:
Timestamp:
04/24/2019 06:36:58 PM (4 months ago)
Author:
SergeyBiryukov
Message:

Twenty Nineteen: Fix padding discrepancies in responsive styles for Column block.

Props kjellr, dianeco.
Fixes #46643, #46999.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r45132 r45264  
    742742    .wp-block-columns {
    743743
    744         &.alignfull {
    745             padding-left: $size__spacing-unit;
    746             padding-right: $size__spacing-unit;
    747         }
    748 
    749         @include media(mobile) {
     744        .wp-block-column > * {
     745
     746            &:first-child {
     747                margin-top: 0;
     748            }
     749
     750            &:last-child {
     751                margin-bottom: 0;
     752            }
     753        }
     754
     755        @include media(tablet) {
    750756            flex-wrap: nowrap;
    751         }
    752 
    753         @include media(tablet) {
    754             .wp-block-column > * {
    755 
    756                 &:first-child {
    757                     margin-top: 0;
    758                 }
    759 
    760                 &:last-child {
    761                     margin-bottom: 0;
    762                 }
    763             }
    764 
    765             &[class*='has-'] > * {
    766                 margin-right: $size__spacing-unit;
    767 
    768                 &:last-child {
    769                     margin-right: 0;
    770                 }
    771             }
    772 
    773             &.alignfull,
    774             &.alignfull .wp-block-column {
    775                 padding-left: calc(2 * #{$size__spacing-unit});
    776                 padding-right: calc(2 * #{$size__spacing-unit});
     757
     758            .wp-block-column:not(:first-child) {
     759                margin-left: 32px;
    777760            }
    778761        }
  • trunk/src/wp-content/themes/twentynineteen/style-rtl.css

    r45258 r45264  
    60306030}
    60316031
    6032 .entry .entry-content .wp-block-columns.alignfull {
    6033   padding-right: 1rem;
    6034   padding-left: 1rem;
    6035 }
    6036 
    6037 @media only screen and (min-width: 600px) {
     6032.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
     6033  margin-top: 0;
     6034}
     6035
     6036.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
     6037  margin-bottom: 0;
     6038}
     6039
     6040@media only screen and (min-width: 768px) {
    60386041  .entry .entry-content .wp-block-columns {
    60396042    flex-wrap: nowrap;
    60406043  }
    6041 }
    6042 
    6043 @media only screen and (min-width: 768px) {
    6044   .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
    6045     margin-top: 0;
    6046   }
    6047   .entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
    6048     margin-bottom: 0;
    6049   }
    6050   .entry .entry-content .wp-block-columns[class*='has-'] > * {
    6051     margin-left: 1rem;
    6052   }
    6053   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
    6054     margin-left: 0;
    6055   }
    6056   .entry .entry-content .wp-block-columns.alignfull,
    6057   .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
    6058     padding-right: calc(2 * 1rem);
    6059     padding-left: calc(2 * 1rem);
     6044  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
     6045    margin-right: 32px;
    60606046  }
    60616047}
  • trunk/src/wp-content/themes/twentynineteen/style.css

    r45258 r45264  
    60426042}
    60436043
    6044 .entry .entry-content .wp-block-columns.alignfull {
    6045   padding-left: 1rem;
    6046   padding-right: 1rem;
    6047 }
    6048 
    6049 @media only screen and (min-width: 600px) {
     6044.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
     6045  margin-top: 0;
     6046}
     6047
     6048.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
     6049  margin-bottom: 0;
     6050}
     6051
     6052@media only screen and (min-width: 768px) {
    60506053  .entry .entry-content .wp-block-columns {
    60516054    flex-wrap: nowrap;
    60526055  }
    6053 }
    6054 
    6055 @media only screen and (min-width: 768px) {
    6056   .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
    6057     margin-top: 0;
    6058   }
    6059   .entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
    6060     margin-bottom: 0;
    6061   }
    6062   .entry .entry-content .wp-block-columns[class*='has-'] > * {
    6063     margin-right: 1rem;
    6064   }
    6065   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
    6066     margin-right: 0;
    6067   }
    6068   .entry .entry-content .wp-block-columns.alignfull,
    6069   .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
    6070     padding-left: calc(2 * 1rem);
    6071     padding-right: calc(2 * 1rem);
     6056  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
     6057    margin-left: 32px;
    60726058  }
    60736059}
Note: See TracChangeset for help on using the changeset viewer.