update bootstrap 3 custom styles

carloluis · May 31, 2018 · d297a40 · d297a40
1 parent f2b6905
commit d297a40
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/src/styles/Suggestor.scss b/src/styles/Suggestor.scss
@@ -4,21 +4,23 @@
 	width: 100%;
 }
 
+:global .ss-input {
+	padding-right: 48px;
+}
+
 :global .ss-triangle,
 :global .ss-remove {
 	position: absolute;
 	cursor: pointer;
 	margin: auto;
 	color: $grey;
-	font-size: 16px;
-	right: 10px;
-	top: 0;
-	bottom: 0;
-	height: 14px;
+	right: 6px;
+	top: 50%;
+	transform: translateY(-50%);
 	z-index: 4;
+	padding: 2px;
 }
 
 :global .ss-remove {
-	font-size: 14px;
-	right: 30px;
+	right: 26px;
 }
diff --git a/src/suggestor/__tests__/__snapshots__/Suggestor.spec.js.snap b/src/suggestor/__tests__/__snapshots__/Suggestor.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Ssuggestor /> snapshot - with arrow 1`] = `
 <div
-  className="input-group"
+  className="input-group ss-root"
   onClick={[Function]}
   onKeyDown={[Function]}
   style={
@@ -12,7 +12,7 @@ exports[`<Ssuggestor /> snapshot - with arrow 1`] = `
   }
 >
   <input
-    className="form-control"
+    className="form-control ss-input"
     onChange={[Function]}
     placeholder="placeholder text"
     required={false}
@@ -28,7 +28,7 @@ exports[`<Ssuggestor /> snapshot - with arrow 1`] = `
 
 exports[`<Ssuggestor /> snapshot - with close 1`] = `
 <div
-  className="input-group"
+  className="input-group ss-root"
   onClick={[Function]}
   onKeyDown={[Function]}
   style={
@@ -38,7 +38,7 @@ exports[`<Ssuggestor /> snapshot - with close 1`] = `
   }
 >
   <input
-    className="form-control"
+    className="form-control ss-input"
     onChange={[Function]}
     placeholder="placeholder text"
     required={false}
@@ -55,7 +55,7 @@ exports[`<Ssuggestor /> snapshot - with close 1`] = `
 
 exports[`<Ssuggestor /> snapshot - with suggestions 1`] = `
 <div
-  className="input-group"
+  className="input-group ss-root"
   onClick={[Function]}
   onKeyDown={[Function]}
   style={
@@ -65,7 +65,7 @@ exports[`<Ssuggestor /> snapshot - with suggestions 1`] = `
   }
 >
   <input
-    className="form-control"
+    className="form-control ss-input"
     onChange={[Function]}
     placeholder="placeholder text"
     required={false}
@@ -78,7 +78,7 @@ exports[`<Ssuggestor /> snapshot - with suggestions 1`] = `
 
 exports[`<Ssuggestor /> snapshot - with suggestions visible 1`] = `
 <div
-  className="input-group"
+  className="input-group ss-root"
   onClick={[Function]}
   onKeyDown={[Function]}
   style={
@@ -88,7 +88,7 @@ exports[`<Ssuggestor /> snapshot - with suggestions visible 1`] = `
   }
 >
   <input
-    className="form-control"
+    className="form-control ss-input"
     onChange={[Function]}
     placeholder="placeholder text"
     required={false}
@@ -141,7 +141,7 @@ exports[`<Ssuggestor /> snapshot - with suggestions visible 1`] = `
 
 exports[`<Ssuggestor /> snapshot - without suggestions 1`] = `
 <div
-  className="input-group"
+  className="input-group ss-root"
   onClick={[Function]}
   onKeyDown={[Function]}
   style={
@@ -151,7 +151,7 @@ exports[`<Ssuggestor /> snapshot - without suggestions 1`] = `
   }
 >
   <input
-    className="form-control"
+    className="form-control ss-input"
     onChange={[Function]}
     placeholder="placeholder text"
     required={false}

diff --git a/src/themes/bootstrap-3.json b/src/themes/bootstrap-3.json
@@ -1,6 +1,6 @@
 {
 	"root": "input-group ss-root",
-	"input": "form-control",
+	"input": "form-control ss-input",
 	"arrow": "glyphicon glyphicon-triangle-bottom ss-triangle",
 	"close": "glyphicon glyphicon-remove ss-remove",
 	"list": "dropdown-menu ss-list",