Polish association bar styles

htmlburger · Mar 29, 2019 · 1fb701d · 1fb701d
1 parent db2bf97
commit 1fb701d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
@@ -255,19 +255,19 @@ class AssociationField extends Component {
 						onChange={ this.handleSearchChange }
 					/>
 
+					{
+						isLoading
+							? <span className="cf-association__spinner spinner is-active"></span>
+							: ''
+					}
+
 					<span className="cf-association__counter">
 						{ sprintf(
 							__( 'Showing %1$d of %2$d results', 'carbon-fields-ui' ),
 							Number( options.length ),
 							Number( totalOptionsCount )
 						) }
 					</span>
-
-					{
-						isLoading
-							? <span className="cf-association__spinner spinner is-active"></span>
-							: ''
-					}
 				</div>
 
 				<div className="cf-association__cols">
@@ -494,7 +494,7 @@ const applyWithState = withState( {
 	totalOptionsCount: 0,
 	queryTerm: '',
 	page: 1,
-	isLoading: true
+	isLoading: false
 } );
 
 const applyWithEffects = withEffects( aperture, { handler } );

diff --git a/packages/core/fields/association/style.scss b/packages/core/fields/association/style.scss
@@ -9,29 +9,45 @@
 	justify-content: space-between;
 	align-items: center;
 	flex-direction: row;
+	border-color: $wp-color-gray-light-500;
+	border-style: solid;
+	border-width: 1px 1px 0;
+	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
 
 	.cf-search-input {
 		flex: 1 1 auto;
 	}
 
 	.cf-search-input__inner {
-		border-bottom: 0;
+		border: 0;
+		box-shadow: none;
+
+		&:focus {
+			border-color: none;
+			box-shadow: none;
+			outline: none;
+		}
+	}
+
+	&:focus-within {
+		border-color: #5b9dd9;
+		box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+		outline: 2px solid transparent;
 	}
 }
 
 .cf-association__counter {
 	font-size: 12px;
 	color: $wp-color-dark-gray;
 	pointer-events: none;
-	margin-right: 25px;
-	margin-left: 10px;
+	margin-right: 5px;
+	margin-left: 5px;
 }
 
 .cf-association__spinner {
 	float: none;
-	position: absolute;
-	right: 0;
 	margin: 0;
+	margin-left: 5px;
 }
 
 .cf-association__cols {