Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Varia: Fix button styles to work alongside Gutenberg 7.9 #1925

Merged
merged 4 commits into from
Apr 17, 2020
Merged

Varia: Fix button styles to work alongside Gutenberg 7.9 #1925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
526884d
Varia: Fix button styles to work alongside Gutenberg 7.9
kjellr Apr 16, 2020
68a276b
Varia: revise outline button selector nesting. code tidying
allancole Apr 17, 2020
79e5f16
Varia: Add outline button styles for the frontend.
allancole Apr 17, 2020
ea620dd
Varia: Cleanup left/right align styles for button blocks before and a…
allancole Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 26 additions & 29 deletions varia/sass/blocks/button/_editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,39 @@
.wp-block-button {

/* Default Style */
.wp-block-button__link {
color: #{map-deep-get($config-button, "color", "text")};
font-weight: #{map-deep-get($config-button, "font", "weight")};
@include font-family( map-deep-get($config-button, "font", "family") );
font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
line-height: #{map-deep-get($config-button, "font", "line-height")};
background-color: #{map-deep-get($config-button, "color", "background")};
border-radius: #{map-deep-get($config-button, "border-radius")};
padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
/* Default Style */
.wp-block-button__link {
color: #{map-deep-get($config-button, "color", "text")};
font-weight: #{map-deep-get($config-button, "font", "weight")};
@include font-family( map-deep-get($config-button, "font", "family") );
font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
line-height: #{map-deep-get($config-button, "font", "line-height")};
background-color: #{map-deep-get($config-button, "color", "background")};
border-radius: #{map-deep-get($config-button, "border-radius")};
padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};

&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "text-hover")};
background-color: #{map-deep-get($config-button, "color", "background-hover")};
}
&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "text-hover")};
background-color: #{map-deep-get($config-button, "color", "background-hover")};
}

/* Outline Style */
&.is-style-outline {
&.is-style-outline,
.is-style-outline & {

.wp-block-button__link {
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: 2px solid currentcolor;
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: 2px solid currentcolor;

&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
}

/* Squared Style */
&.is-style-squared .wp-block-button__link {
&.is-style-squared,
.is-style-squared & {
border-radius: 0;
}
}
Expand Down
40 changes: 25 additions & 15 deletions varia/sass/blocks/button/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,28 +16,38 @@ input[type="submit"],
.wp-block-button {

// Outline Style
&.is-style-outline {
&.is-style-outline,
&.is-style-outline .wp-block-button__link {

.wp-block-button__link {
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};

&:active {
color: #{map-deep-get($config-button, "color", "background")};
background: transparent;
border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};

&:active {
color: #{map-deep-get($config-button, "color", "background")};
}

&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
}

&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "background-hover")};
}
}

// Squared Style
&.is-style-squared,
&.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
View file
Open in desktop
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
24 changes: 13 additions & 11 deletions varia/style-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,13 +528,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: bold;
font-family: sans-serif;
Expand All @@ -544,24 +539,31 @@ object {
background-color: blue;
border-radius: 9px;
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: indigo;
}

.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: blue;
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: indigo;
}

.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;
}

Expand Down
54 changes: 35 additions & 19 deletions varia/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1432,17 +1432,27 @@ 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: blue;
background: transparent;
border: 2px solid currentcolor;
padding: 14px 16px;
}

.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:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
Copy link
Contributor Author

@kjellr kjellr Apr 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is an uncompiled remnant from a previous commit? These changes shouldn't actually touch this file.

color: blue;
}

.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: indigo;
}

.wp-block-button.is-style-squared,
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
Expand Down Expand Up @@ -3581,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 @@ -3773,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
Loading