Lodestar: Update styles for buttons; see #434.

This commit is contained in:
Laurel Fulford 2019-02-07 11:54:49 -08:00
parent 5b9894e254
commit 5f207a760f
2 changed files with 23 additions and 25 deletions

View file

@ -254,9 +254,8 @@ body.lodestar-front-page:not(.has-sidebar) .lodestar-panel:not(.two-column) .wp-
/* Buttons */
.wp-block-button .wp-block-button__link {
border: 0;
border-radius: 0;
box-shadow: none;
border: 0;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 0.05em;
@ -267,21 +266,26 @@ body.lodestar-front-page:not(.has-sidebar) .lodestar-panel:not(.two-column) .wp-
transition: background 0.2s;
}
.wp-block-button__link {
.wp-block-button__link,
.wp-block-button__link:visited {
background: #29292a;
color: #fff;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
background: #555;
.wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid currentColor;
}
.wp-block-button__link.has-background:hover,
.wp-block-button__link.has-background:focus,
.wp-block-button__link.has-background:active {
opacity: 0.8;
.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #29292a;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active {
background: #555;
color: #fff;
box-shadow: none;
}
/* Separator */

View file

@ -42,7 +42,7 @@ Description: Used to style Gutenberg Blocks in the editor.
font-size: 34px;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.25;
line-height: 1.25;
}
/* Headings */
@ -322,12 +322,6 @@ p.has-drop-cap:not(:focus)::first-letter {
transition: background 0.2s;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus,
.wp-block-file .wp-block-file__button:active {
background: #555;
}
/*--------------------------------------------------------------
4.0 Blocks - Formatting
--------------------------------------------------------------*/
@ -409,8 +403,6 @@ p.has-drop-cap:not(:focus)::first-letter {
.wp-block-button .wp-block-button__link {
background: #29292a;
border: 0;
border-radius: 0;
box-shadow: none;
color: #fff;
font-size: 14px;
@ -418,15 +410,17 @@ p.has-drop-cap:not(:focus)::first-letter {
letter-spacing: 0.05em;
line-height: 1;
padding: 1em 1.5em;
text-shadow: none;
text-transform: uppercase;
transition: background 0.2s;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
background: #555;
.wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid currentColor;
background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #29292a;
}
/* Separator */