Target mode switcher child styles by classname

Nesting input to defeat specificity of general `.wp-admin select` selector
WordPress · Apr 10, 2017 · fe4cf93 · fe4cf93
1 parent c3dc925
commit fe4cf93
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js
@@ -37,6 +37,7 @@ function ModeSwitcher( { mode, onSwitch } ) {
 			<select
 				value={ mode }
 				onChange={ ( event ) => onSwitch( event.target.value ) }
+				className="editor-mode-switcher__input"
 			>
 				{ MODES.map( ( { value, label } ) =>
 					<option key={ value } value={ value }>

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -10,19 +10,19 @@
 	display: flex;
 	align-items: center;
 
-	select {
+	.editor-mode-switcher__input {
 		background: transparent;
-	    line-height: 1;
-	    border: 0;
-	    border-radius: 0;
-	    -webkit-appearance: none;
+		line-height: 1;
+		border: 0;
+		border-radius: 0;
+		-webkit-appearance: none;
 		outline: none;
 		cursor: pointer;
 		box-shadow: none;
 		padding-right: 24px;
 	}
 
-	svg {
+	.dashicon {
 		position: relative;
 		z-index: -1;
 		margin-left: -24px;