diff --git a/varia/sass/blocks/button/_style.scss b/varia/sass/blocks/button/_style.scss index 37c7cb71ff..96751f4c9a 100644 --- a/varia/sass/blocks/button/_style.scss +++ b/varia/sass/blocks/button/_style.scss @@ -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; + } } diff --git a/varia/sass/blocks/utilities/_style.scss b/varia/sass/blocks/utilities/_style.scss index 4996d9bf51..bf9408f9b6 100644 --- a/varia/sass/blocks/utilities/_style.scss +++ b/varia/sass/blocks/utilities/_style.scss @@ -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; } diff --git a/varia/style-rtl.css b/varia/style-rtl.css index 22b94f525a..5a6b98d1ce 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -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; } @@ -3590,10 +3591,11 @@ 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; @@ -3601,50 +3603,55 @@ img#wpstats { } @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); } @@ -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))); } } diff --git a/varia/style.css b/varia/style.css index aced91ba32..3b085c3475 100644 --- a/varia/style.css +++ b/varia/style.css @@ -3608,10 +3608,11 @@ 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; @@ -3619,50 +3620,55 @@ img#wpstats { } @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); } @@ -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))); }