beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Maywood: Fix button styles to work alongside Gutenberg 7.9.

Browse source
This commit is contained in:
Allan Cole 2020-04-17 16:05:37 -04:00
parent 9f84810302
commit f200695f88
4 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
maywood/style-editor.css
View file

@ -522,13 +522,8 @@ object {
color: currentColor;
}
.wp-block-button {
/* Default Style */
/* Outline Style */
/* Squared Style */
}
.wp-block-button .wp-block-button__link {
/* Default Style */
.wp-block-button__link {
color: white;
font-weight: 700;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -538,24 +533,31 @@ object {
background-color: #897248;
border-radius: 5px;
padding: 16px 16px;
/* Outline Style */
/* Squared Style */
}
.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
color: white;
background-color: #685636;
}
.wp-block-button.is-style-outline .wp-block-button__link {
.wp-block-button__link.is-style-outline,
.is-style-outline .wp-block-button__link {
color: #897248;
background: transparent;
border: 2px solid currentcolor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
.wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus,
.is-style-outline .wp-block-button__link.has-focus {
color: #685636;
}
.wp-block-button.is-style-squared .wp-block-button__link {
.wp-block-button__link.is-style-squared,
.is-style-squared .wp-block-button__link {
border-radius: 0;
}

50
maywood/style-rtl.css
View file

@ -1399,6 +1399,7 @@ button[data-load-more-btn], .button {
/**
* Block Options
*/
.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
color: #897248;
background: transparent;
@ -1406,14 +1407,19 @@ button[data-load-more-btn], .button {
padding: 14px 16px;
}
.wp-block-button.is-style-outline:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
color: #897248;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
color: #685636;
}
.wp-block-button.is-style-squared,
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
@ -3552,10 +3558,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;
@ -3563,50 +3570,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);
}
@ -3744,36 +3756,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)));
}
}

1
maywood/style-woocommerce-rtl.css
View file

@ -209,6 +209,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
background-color: #897248;
border-radius: 5px;
border-width: 0;
text-decoration: none;
padding: 16px 16px;
}

50
maywood/style.css
View file

@ -1399,6 +1399,7 @@ button[data-load-more-btn], .button {
/**
* Block Options
*/
.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
color: #897248;
background: transparent;
@ -1406,14 +1407,19 @@ button[data-load-more-btn], .button {
padding: 14px 16px;
}
.wp-block-button.is-style-outline:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
color: #897248;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
color: #685636;
}
.wp-block-button.is-style-squared,
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
@ -3569,10 +3575,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;
@ -3580,50 +3587,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);
}
@ -3767,41 +3779,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)));
}