Skip to content

Commit

Permalink
Varia: Cleanup left/right align styles for button blocks before and a…
Browse files Browse the repository at this point in the history
…fter 7.9.1.
  • Loading branch information
allancole committed Apr 17, 2020
1 parent 79e5f16 commit ea620dd
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 37 deletions.
10 changes: 10 additions & 0 deletions varia/sass/blocks/button/_style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,14 @@ input[type="submit"],
&.is-style-squared .wp-block-button__link {
border-radius: 0;
}

// Set alignleft as default floating behavior
.entry-content > &:not(.alignleft):not(.alignright) {
@extend %responsive-alignleft;
}

// Set aligndefault as center floating behavior
.entry-content > &.aligncenter {
@extend %responsive-aligndefault;
}
}
3 changes: 2 additions & 1 deletion varia/sass/blocks/utilities/_style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@
/**
* .aligndefault
*/
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
@extend %responsive-aligndefault;
}
Expand Down
43 changes: 25 additions & 18 deletions varia/style-rtl.css
Original file line number Diff line number Diff line change
Expand Up @@ -1452,6 +1452,7 @@ button[data-load-more-btn], .button {
color: indigo;
}

.wp-block-button.is-style-squared,
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
Expand Down Expand Up @@ -3590,61 +3591,67 @@ img#wpstats {
* Page Layout Styles & Repsonsive Styles
*/
/* Responsive width-content overrides */
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width: 560px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
}

@media only screen and (min-width: 640px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
}

@media only screen and (min-width: 782px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}

@media only screen and (min-width: 1024px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}

@media only screen and (min-width: 1280px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
Expand Down Expand Up @@ -3782,36 +3789,36 @@ img#wpstats {
}
}

.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: 16px;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
Expand Down
42 changes: 24 additions & 18 deletions varia/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -3608,61 +3608,67 @@ img#wpstats {
* Page Layout Styles & Repsonsive Styles
*/
/* Responsive width-content overrides */
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

@media only screen and (min-width: 560px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
}

@media only screen and (min-width: 640px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
}

@media only screen and (min-width: 782px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}

@media only screen and (min-width: 1024px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}

@media only screen and (min-width: 1280px) {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
Expand Down Expand Up @@ -3806,41 +3812,41 @@ img#wpstats {
}
}

.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: 16px;
}

@media only screen and (min-width: 560px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}

@media only screen and (min-width: 640px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}

@media only screen and (min-width: 782px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}

@media only screen and (min-width: 1024px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}

@media only screen and (min-width: 1280px) {
.entry-content > .alignleft {
.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
Expand Down

0 comments on commit ea620dd

Please sign in to comment.