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

Merge pull request #548 from Automattic/fixes/434-correct-button-styles

Browse source 
Canard: Fix button styles
This commit is contained in:
Laurel 2019-02-06 16:09:54 -08:00 committed by GitHub
commit 26fd81562b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
affinity/blocks.css
View file

@ -192,15 +192,31 @@ p.has-drop-cap:not(:focus)::first-letter {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
left: 4px;
line-height: 1;
padding: 16px 28px;
position: relative;
transition: 0.3s;
text-decoration: none;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
.wp-block-button__link:not(.has-background) {
background-color: #99908a;
box-shadow: 0 0 0 4px #99908a;
border: 2px solid white;
left: 4px;
padding: 12px 24px;
}
.wp-block-button.is-style-outline .wp-block-button__link {
left: 0;
background-color: transparent;
border-color: currentColor;
box-shadow: none;
padding: 16px 28px;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #99908a;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color),
@ -210,22 +226,19 @@ p.has-drop-cap:not(:focus)::first-letter {
color: white;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
background-color: #99908a;
box-shadow: 0 0 0 4px #99908a;
}
.entry-content .wp-block-button .wp-block-button__link:active,
.entry-content .wp-block-button .wp-block-button__link.has-background:active,
.entry-content .wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button .wp-block-button__link.has-background:focus,
.entry-content .wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link.has-background:hover {
box-shadow: 0 0 0 4px #5e5853;
.entry-content .wp-block-button .wp-block-button__link:hover {
background-color: #5e5853;
color: #fff;
}
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active,
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus,
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
box-shadow: 0 0 0 4px #5e5853;
}
/* Seperator */
hr.wp-block-separator {
@ -281,51 +294,3 @@ hr.wp-block-separator {
.wp-block-latest-comments__comment-excerpt p:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
6.0 Colors
--------------------------------------------------------------*/
.wp-block-button__link.has-pale-pink-background-color:link {
box-shadow: 0 0 0 4px #f78da7;
}
.wp-block-button__link.has-vivid-red-background-color:link {
box-shadow: 0 0 0 4px #cf2e2e;
}
.wp-block-button__link.has-luminous-vivid-orange-background-color:link {
box-shadow: 0 0 0 4px #ff6900;
}
.wp-block-button__link.has-luminous-vivid-amber-background-color:link {
box-shadow: 0 0 0 4px #fcb900;
}
.wp-block-button__link.has-light-green-cyan-background-color:link {
box-shadow: 0 0 0 4px #7bdcb5;
}
.wp-block-button__link.has-vivid-green-cyan-background-color:link {
box-shadow: 0 0 0 4px #00d084;
}
.wp-block-button__link.has-pale-cyan-blue-background-color:link {
box-shadow: 0 0 0 4px #8ed1fc;
}
.wp-block-button__link.has-vivid-cyan-blue-background-color:link {
box-shadow: 0 0 0 4px #0693e3;
}
.wp-block-button__link.has-very-light-gray-background-color:link {
box-shadow: 0 0 0 4px #eee;
}
.wp-block-button__link.has-cyan-bluish-gray-background-color:link {
box-shadow: 0 0 0 4px #abb8c3;
}
.wp-block-button__link.has-very-dark-gray-background-color:link {
box-shadow: 0 0 0 4px #313131;
}

62
affinity/editor-blocks.css
View file

@ -383,14 +383,6 @@
left: 4px;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus,
.wp-block-file .wp-block-file__button:focus {
outline-color: #5e5853;
background-color: #5e5853;
color: #fff;
}
.rtl .wp-block-file * + .wp-block-file__button {
margin-left: 0.75em;
margin-right: 0;
@ -724,56 +716,18 @@
left: 4px;
}
.wp-block-button.is-style-outline .wp-block-button__link {
border-color: currentColor;
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.has-background {
box-shadow: none;
border: none;
padding: 16px 28px;
}
.wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid currentColor;
color: #99908a;
}
.wp-block-button__link.has-pale-pink-background-color {
box-shadow: 0 0 0 4px #f78da7;
}
.wp-block-button__link.has-vivid-red-background-color {
box-shadow: 0 0 0 4px #cf2e2e;
}
.wp-block-button__link.has-luminous-vivid-orange-background-color {
box-shadow: 0 0 0 4px #ff6900;
}
.wp-block-button__link.has-luminous-vivid-amber-background-color {
box-shadow: 0 0 0 4px #fcb900;
}
.wp-block-button__link.has-light-green-cyan-background-color {
box-shadow: 0 0 0 4px #7bdcb5;
}
.wp-block-button__link.has-vivid-green-cyan-background-color {
box-shadow: 0 0 0 4px #00d084;
}
.wp-block-button__link.has-pale-cyan-blue-background-color {
box-shadow: 0 0 0 4px #8ed1fc;
}
.wp-block-button__link.has-vivid-cyan-blue-background-color {
box-shadow: 0 0 0 4px #0693e3;
}
.wp-block-button__link.has-very-light-gray-background-color {
box-shadow: 0 0 0 4px #eee;
}
.wp-block-button__link.has-cyan-bluish-gray-background-color {
box-shadow: 0 0 0 4px #abb8c3;
}
.wp-block-button__link.has-very-dark-gray-background-color {
box-shadow: 0 0 0 4px #313131;
}
/* Separator */
.wp-block-separator {
background-color: #e8e9ea;

26
canard/blocks.css
View file

@ -219,7 +219,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */
.wp-block-button .wp-block-button__link {
border-radius: 0;
border: 2px solid;
display: inline-block;
font-family: Lato, sans-serif;
@ -228,26 +227,27 @@ p.has-drop-cap:not(:focus)::first-letter {
text-transform: uppercase;
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
}
.wp-block-button__link:not(.has-background) {
background: #d11415;
border-color: #d11415;
}
.wp-block-button__link:not(.has-text-color),
.wp-block-button__link:not(.has-text-color):active,
.wp-block-button__link:not(.has-text-color):focus,
.wp-block-button__link:not(.has-text-color):hover {
.wp-block-button__link:not(.has-text-color) {
color: #fff;
}
.wp-block-button__link:not(.has-background):active,
.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:not(.has-background):hover {
.is-style-outline .wp-block-button__link {
background: transparent;
border-color: currentColor;
}
.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #d11415;
}
.entry-content .wp-block-button .wp-block-button__link:active,
.entry-content .wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button .wp-block-button__link:hover {
color: #d11415;
background: #fff;
border-color: #d11415;

24
canard/editor-blocks.css
View file

@ -735,8 +735,8 @@
--------------------------------------------------------------*/
/* Buttons */
.wp-block-button .wp-block-button__link {
border-radius: 0;
.wp-block-button__link {
background: #d11415;
border: 2px solid;
display: inline-block;
font-family: Lato, sans-serif;
@ -745,29 +745,13 @@
text-transform: uppercase;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active {
}
.wp-block-button__link:not(.has-text-color),
.wp-block-button__link:not(.has-text-color):active,
.wp-block-button__link:not(.has-text-color):focus,
.wp-block-button__link:not(.has-text-color):hover {
color: #fff;
}
.wp-block-button__link:not(.has-background) {
background: #d11415;
border-color: #d11415;
}
.wp-block-button__link:not(.has-background):active,
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus {
.is-style-outline .wp-block-button__link {
color: #d11415;
background: #fff;
border-color: #d11415;
border-color: currentColor;
}
/* Separator */