Skip to content

Commit

Permalink
simplifies CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
derekshirk committed Jun 16, 2020
1 parent 47f8c6f commit f87ec99
Showing 1 changed file with 6 additions and 17 deletions.
23 changes: 6 additions & 17 deletions src/vendor/wordpress/_wordpress.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,45 +70,34 @@ $wp-button-gap: sizes.$list-inline-gap;
}

/**
* This style block goes against our CSS best practices and includes an `<a>`
* tag element as a selector. Without this the `@wordpress/block-library`
* styles will override our desired visual output in Storybook previews
*
* If we don't include `:not(.wp-block-file__button)` here and opt for `*`
* instead, this selector is not specific enough to enforce the desired
* styles, and style rules from the `@wordpress/block-library` override
* various properties.
*
* 1. Prevents default WP styling from modifying buttons opacity.
* 1. Prevents default WP styling from modifying buttons opacity on hover.
*/

.wp-block-file__button,
:not(.wp-block-file__button) {
* {
@include button.default;
opacity: inherit !important; /* 1 */
}

/**
* 1. Prevents default WP styling from modifying buttons opacity and
* text color.
* 1. Prevents default WP styling from modifying button text color on hover
*/

&.c-button--secondary {
.wp-block-file__button,
:not(.wp-block-file__button) {
* {
@include button.secondary;
color: inherit !important; /* 1 */
}
}

/**
* 1. Prevents default WP styling from modifying buttons opacity and
* text color.
* 1. Prevents default WP styling from modifying button text color on hover
*/

&.c-button--tertiary {
.wp-block-file__button,
:not(.wp-block-file__button) {
* {
@include button.tertiary;
color: inherit !important; /* 1 */
}
Expand Down

0 comments on commit f87ec99

Please sign in to comment.