swaps out the CSS2 :before with the CSS3 ::before, see #8618 (#8630)

WordPress · Aug 7, 2018 · d54396c · d54396c
1 parent 41ff1f2
commit d54396c
Show file tree

Hide file tree

Showing 20 changed files with 60 additions and 60 deletions.
diff --git a/core-blocks/cover-image/editor.scss b/core-blocks/cover-image/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-cover-image {
 	margin: 0;
 
-	.editor-rich-text__tinymce[data-is-empty="true"]:before {
+	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		position: inherit;
 	}
 

diff --git a/core-blocks/cover-image/style.scss b/core-blocks/cover-image/style.scss
@@ -52,7 +52,7 @@
 		background-attachment: fixed;
 	}
 
-	&.has-background-dim:before {
+	&.has-background-dim::before {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -63,7 +63,7 @@
 	}
 
 	@for $i from 1 through 10 {
-		&.has-background-dim.has-background-dim-#{ $i * 10 }:before {
+		&.has-background-dim.has-background-dim-#{ $i * 10 }::before {
 			background-color: rgba( $black, $i * 0.1 );
 		}
 	}

diff --git a/core-blocks/freeform/editor.scss b/core-blocks/freeform/editor.scss
@@ -115,7 +115,7 @@
 }
 
 .editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] {
-	.editor-block-list__block-edit:before {
+	.editor-block-list__block-edit::before {
 		outline: $border-width solid #e2e4e7;
 	}
 
@@ -150,7 +150,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	background: #f5f5f5;
 	border-bottom: $border-width solid #e2e4e7;
 
-	&:before {
+	&::before {
 		font-family: $default-font;
 		font-size: $default-font-size;
 		content: attr( data-placeholder );

diff --git a/core-blocks/more/editor.scss b/core-blocks/more/editor.scss
@@ -31,13 +31,13 @@
 	}
 
 	// Dashed line
-	&:before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc( 50% );
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
 	}
 }
diff --git a/core-blocks/nextpage/editor.scss b/core-blocks/nextpage/editor.scss
@@ -23,13 +23,13 @@
 	}
 
 	// Dashed line
-	&:before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc( 50% );
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
 	}
 }
diff --git a/core-blocks/pullquote/editor.scss b/core-blocks/pullquote/editor.scss
@@ -1,7 +1,7 @@
 .editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
-		& .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+		& .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 		& .editor-rich-text p {
 			font-size: 20px;
 		}
@@ -13,18 +13,18 @@
 		display: block;
 	}
 
-	cite .editor-rich-text__tinymce[data-is-empty="true"]:before {
+	cite .editor-rich-text__tinymce[data-is-empty="true"]::before {
 		font-size: 14px;
 		font-family: $default-font;
 	}
 
-	.editor-rich-text__tinymce[data-is-empty="true"]:before {
+	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		width: 100%;
 		left: 50%;
 		transform: translateX( -50% );
 	}
 
-	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 	& > .editor-rich-text p {
 		font-size: 24px;
 		line-height: 1.6;

diff --git a/core-blocks/separator/style.scss b/core-blocks/separator/style.scss
@@ -14,7 +14,7 @@
 		line-height: 1;
 		height: auto;
 
-		&:before {
+		&::before {
 			content: '\00b7 \00b7 \00b7';
 			color: $dark-gray-700;
 			font-size: 20px;

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -3,9 +3,9 @@
 // value is designed to work with).
 
 $z-layers: (
-	'.editor-block-list__block-edit:before': 0,
+	'.editor-block-list__block-edit::before': 0,
 	'.editor-block-switcher__arrow': 1,
-	'.editor-block-list__block .wp-block-more:before': -1,
+	'.editor-block-list__block .wp-block-more::before': -1,
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
 	'.freeform-toolbar': 10,
@@ -14,7 +14,7 @@ $z-layers: (
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
-	'.edit-post-meta-boxes-area.is-loading:before': 1,
+	'.edit-post-meta-boxes-area.is-loading::before': 1,
 	'.edit-post-meta-boxes-area .spinner': 5,
 	'.editor-block-contextual-toolbar': 21,
 	'.components-popover__close': 5,

diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
@@ -79,7 +79,7 @@ body.gutenberg-editor-page {
 	box-sizing: border-box;
 
 	*,
-	*:before,
+	*::before,
 	*:after {
 		box-sizing: inherit;
 	}

diff --git a/edit-post/components/meta-boxes/meta-boxes-area/style.scss b/edit-post/components/meta-boxes/meta-boxes-area/style.scss
@@ -57,15 +57,15 @@
 		width: 44px;
 	}
 
-	&.is-loading:before {
+	&.is-loading::before {
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		content: '';
 		background: transparent;
-		z-index: z-index( '.edit-post-meta-boxes-area.is-loading:before');
+		z-index: z-index( '.edit-post-meta-boxes-area.is-loading::before');
 	}
 
 	.spinner {

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
@@ -86,7 +86,7 @@ $color-palette-circle-spacing: 14px;
 	left: 0;
 	bottom: 0;
 	right: 0;
-	&:before {
+	&::before {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -117,7 +117,7 @@ $color-palette-circle-spacing: 14px;
 	overflow: hidden;
 }
 
-.components-color-palette__custom-color .components-color-palette__custom-color-gradient:before {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient::before {
 	content: '';
 	filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 );
 	display: block;

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -17,7 +17,7 @@
 			color: $white;
 		}
 
-		&:focus:before {
+		&:focus::before {
 			top: -3px;
 			right: -3px;
 			bottom: -3px;

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
@@ -81,7 +81,7 @@ $toggle-border-width: 2px;
 			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}
 
-		&:before {
+		&::before {
 			background-color: theme( toggle );
 			border: $toggle-border-width solid theme( toggle );
 		}

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -15,15 +15,15 @@ $arrow-size: 8px;
 	&:not(.is-without-arrow):not(.is-mobile) {
 		margin-left: 2px;
 
-		&:before {
+		&::before {
 			border: $arrow-size solid $light-gray-500;
 		}
 
 		&:after {
 			border: $arrow-size solid $white;
 		}
 
-		&:before,
+		&::before,
 		&:after {
 			content: "";
 			position: absolute;
@@ -35,15 +35,15 @@ $arrow-size: 8px;
 		&.is-top {
 			margin-top: - $arrow-size;
 
-			&:before {
+			&::before {
 				bottom: - $arrow-size;
 			}
 
 			&:after {
 				bottom: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom: none;
 				border-left-color: transparent;
@@ -56,15 +56,15 @@ $arrow-size: 8px;
 		&.is-bottom {
 			margin-top: $arrow-size;
 
-			&:before {
+			&::before {
 				top: -$arrow-size;
 			}
 
 			&:after {
 				top: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-style: solid;
 				border-left-color: transparent;
@@ -78,15 +78,15 @@ $arrow-size: 8px;
 			/*!rtl:begin:ignore*/
 			margin-left: -$arrow-size;
 
-			&:before {
+			&::before {
 				right: -$arrow-size;
 			}
 
 			&:after {
 				right: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-color: transparent;
 				border-left-style: solid;
@@ -100,15 +100,15 @@ $arrow-size: 8px;
 			/*!rtl:begin:ignore*/
 			margin-left: $arrow-size;
 
-			&:before {
+			&::before {
 				left: -$arrow-size;
 			}
 
 			&:after {
 				left: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-color: transparent;
 				border-left: none;

diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -25,7 +25,7 @@ div.components-toolbar {
 			overflow: visible;
 		}
 
-		&.has-left-divider:before {
+		&.has-left-divider::before {
 			display: inline-block;
 			content: '';
 			box-sizing: content-box;

diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
@@ -1,7 +1,7 @@
 .components-tooltip.components-popover {
 	z-index: z-index( '.components-tooltip' );
 
-	&:before {
+	&::before {
 		border-color: transparent;
 	}