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

Merge pull request #1297 from Automattic/fix/issue-1289

Browse source 
Varia: Fixes floated buttons inside column blocks so they display properly.
This commit is contained in:
Thomas Guillot 2019-08-22 09:51:52 +01:00 committed by GitHub
commit e2e2d0ab27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
varia/sass/blocks/utilities/_style.scss
View file

@ -1,6 +1,9 @@
/* Text Alignments */
/* Block Alignments */
/**
* .alignleft
*/
.alignleft {
@extend %responsive-alignleft;
/*rtl:ignore*/
text-align: left;
/*rtl:ignore*/
@ -11,23 +14,41 @@
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
.entry-content > .alignleft {
@extend %responsive-alignleft;
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
float: none;
text-align: center;
}
/**
* .alignright
*/
.alignright {
@extend %responsive-alignright;
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-top: 0;
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
/*rtl:ignore*/
margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
}
.entry-content > .alignright {
@extend %responsive-alignright;
}
// Make sure siblings of floated elements are top-aligned when nested
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
margin-top: 0;
}
/**
* .aligndefault
*/

40
varia/style-rtl.css
View file

@ -1921,7 +1921,10 @@ table th,
vertical-align: middle;
}
/* Text Alignments */
/* Block Alignments */
/**
* .alignleft
*/
.alignleft {
text-align: left;
float: left;
@ -1930,12 +1933,18 @@ table th,
margin-bottom: 32px;
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
float: none;
text-align: center;
}
/**
* .alignright
*/
.alignright {
float: right;
margin-top: 0;
@ -1943,6 +1952,11 @@ table th,
margin-left: 16px;
}
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
margin-top: 0;
}
/**
* .aligndefault
*/
@ -3242,70 +3256,70 @@ img#wpstats {
/* Letting the box-model do all the work here. */
}
.alignright {
.entry-content > .alignright {
margin-right: 16px;
}
@media only screen and (min-width: 560px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}
@media only screen and (min-width: 640px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}
@media only screen and (min-width: 782px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
.alignleft {
.entry-content > .alignleft {
margin-left: 16px;
}
@media only screen and (min-width: 560px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}
@media only screen and (min-width: 640px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}
@media only screen and (min-width: 782px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}

41
varia/style.css
View file

@ -1921,7 +1921,10 @@ table th,
vertical-align: middle;
}
/* Text Alignments */
/* Block Alignments */
/**
* .alignleft
*/
.alignleft {
/*rtl:ignore*/
text-align: left;
@ -1933,22 +1936,32 @@ table th,
margin-bottom: 32px;
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
float: none;
text-align: center;
}
/**
* .alignright
*/
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-top: 0;
margin-bottom: 32px;
/*rtl:ignore*/
margin-left: 16px;
}
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
margin-top: 0;
}
/**
* .aligndefault
*/
@ -3248,81 +3261,81 @@ img#wpstats {
/* Letting the box-model do all the work here. */
}
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: 16px;
}
@media only screen and (min-width: 560px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}
@media only screen and (min-width: 640px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}
@media only screen and (min-width: 782px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: 16px;
}
@media only screen and (min-width: 560px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
}
}
@media only screen and (min-width: 640px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
}
}
@media only screen and (min-width: 782px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
}