Fixed colorpicker input group styles (#1245)

blackbaud · Oct 31, 2017 · 7d492ac · 7d492ac
1 parent d43e2e4
commit 7d492ac
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 22 deletions.
diff --git a/...-visual-tests/screenshots-baseline/colorpicker-Closed-chrome-1000x800-dpr-1.png b/...-visual-tests/screenshots-baseline/colorpicker-Closed-chrome-1000x800-dpr-1.png
diff --git a/skyux-spa-visual-tests/src/app/colorpicker/colorpicker-visual.component.html b/skyux-spa-visual-tests/src/app/colorpicker/colorpicker-visual.component.html
@@ -1,13 +1,21 @@
-<div style="display: inline-block" id="screenshot-colorpicker">
+<div id="screenshot-colorpicker">
   <sky-colorpicker #colorPickerExample1>
-    <input [skyColorpickerInput]="colorPickerExample1" [(ngModel)]="color1" [presetColors]="presetColors1" [initialColor]="selectedColor1"
-      [outputFormat]="selectedOutputFormat1" />
+    <input
+      [skyColorpickerInput]="colorPickerExample1"
+      [(ngModel)]="color1"
+      [presetColors]="presetColors1"
+      [initialColor]="selectedColor1"
+      [outputFormat]="selectedOutputFormat1">
   </sky-colorpicker>
 </div>
 
-<div style="display: block; margin-top: 20px" id="screenshot-colorpicker2">
+<div id="screenshot-colorpicker2">
   <sky-colorpicker #colorPickerExample2>
-    <input [skyColorpickerInput]="colorPickerExample2" [(ngModel)]="color2" [presetColors]="presetColors2" [initialColor]="selectedColor2"
-      [outputFormat]="selectedOutputFormat2" />
+    <input
+      [skyColorpickerInput]="colorPickerExample2"
+      [(ngModel)]="color2"
+      [presetColors]="presetColors2"
+      [initialColor]="selectedColor2"
+      [outputFormat]="selectedOutputFormat2">
   </sky-colorpicker>
 </div>
diff --git a/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts b/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts
@@ -3,29 +3,28 @@ import { SkyVisualTest} from '../../../config/utils/visual-test-commands';
 import { element, by } from 'protractor';
 
 describe('Colorpicker', () => {
-
   it('should match previous colorpicker screenshot', () => {
-    return SkyVisualTest.setupTest('colorpicker')
-    .then(() => {
-      SkyVisualTest.moveCursorOffScreen();
-      return SkyVisualTest.compareScreenshot({
+    return SkyVisualTest
+      .setupTest('colorpicker')
+      .then(() => {
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
           screenshotName: 'colorpicker-closed',
           selector: '#screenshot-colorpicker'
         });
-    });
-
+      });
   });
 
   it('should match previous opened screenshot', () => {
-    return SkyVisualTest.setupTest('colorpicker')
-    .then(() => {
-      element(by.css('sky-dropdown button')).click();
-      SkyVisualTest.moveCursorOffScreen();
-      return SkyVisualTest.compareScreenshot({
-        screenshotName: 'colorpicker-opened',
-        selector: '.sky-colorpicker-container'
+    return SkyVisualTest
+      .setupTest('colorpicker')
+      .then(() => {
+        element(by.css('sky-dropdown button')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'colorpicker-opened',
+          selector: '.sky-colorpicker-container'
+        });
       });
-    });
-
   });
 });
diff --git a/src/modules/colorpicker/colorpicker.component.scss b/src/modules/colorpicker/colorpicker.component.scss
@@ -22,6 +22,7 @@
   border: none;
   pointer-events: none;
   z-index: 1;
+  flex: none;
 }
 
 .sky-colorpicker-reset-button::before {