From fd09e652c828206be2e2bc29b953abe6c3f0be3d Mon Sep 17 00:00:00 2001
From: Grzegorz Rozdzialik <voreny.gelio@gmail.com>
Date: Tue, 4 Oct 2016 11:45:36 +0200
Subject: [PATCH] feat(forms): add example selects with valid styling (#286)

Add another card to the form inputs view displaying selects (single and multiple). Fix options styling.

Related to issue #282
---
 .../inputs/components/selectInputs/index.ts   |  1 +
 .../selectInputs/selectInputs.component.ts    |  9 ++++++++
 .../components/selectInputs/selectInputs.html | 21 +++++++++++++++++++
 .../pages/forms/components/inputs/inputs.html |  4 ++++
 src/app/pages/forms/forms.module.ts           |  2 ++
 src/app/theme/sass/_form.scss                 |  8 +++++++
 6 files changed, 45 insertions(+)
 create mode 100644 src/app/pages/forms/components/inputs/components/selectInputs/index.ts
 create mode 100644 src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
 create mode 100644 src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html

diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/index.ts b/src/app/pages/forms/components/inputs/components/selectInputs/index.ts
new file mode 100644
index 00000000..691112b8
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/index.ts
@@ -0,0 +1 @@
+export * from './selectInputs.component';
diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
new file mode 100644
index 00000000..c1758e69
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'select-inputs',
+  template: require('./selectInputs.html')
+})
+export class SelectInputs {
+  constructor() { }
+}
diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html
new file mode 100644
index 00000000..da4e298e
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html
@@ -0,0 +1,21 @@
+<div class="form-group">
+  <label for="exampleSelect1">Example select</label>
+  <select class="form-control" id="exampleSelect1">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</div>
+
+<div class="form-group">
+  <label for="exampleSelect2">Example multiple select</label>
+  <select multiple class="form-control" id="exampleSelect2">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</div>
diff --git a/src/app/pages/forms/components/inputs/inputs.html b/src/app/pages/forms/components/inputs/inputs.html
index 96155321..2c157ac3 100644
--- a/src/app/pages/forms/components/inputs/inputs.html
+++ b/src/app/pages/forms/components/inputs/inputs.html
@@ -10,7 +10,11 @@
         <group-inputs></group-inputs>
       </ba-card>
 
+      <ba-card title="Selects" baCardClass="with-scroll">
+        <select-inputs></select-inputs>
+      </ba-card>
     </div>
+
     <div class="col-md-6">
       <ba-card title="Validation States" baCardClass="with-scroll">
         <validation-inputs></validation-inputs>
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 4463962d..40fe484c 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -15,6 +15,7 @@ import { ValidationInputs } from './components/inputs/components/validationInput
 import { GroupInputs } from './components/inputs/components/groupInputs';
 import { CheckboxInputs } from './components/inputs/components/checkboxInputs';
 import { Rating } from './components/inputs/components/ratinginputs';
+import { SelectInputs } from './components/inputs/components/selectInputs';
 
 import { InlineForm } from './components/layouts/components/inlineForm';
 import { BlockForm } from './components/layouts/components/blockForm';
@@ -39,6 +40,7 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
     GroupInputs,
     CheckboxInputs,
     Rating,
+    SelectInputs,
     InlineForm,
     BlockForm,
     HorizontalForm,
diff --git a/src/app/theme/sass/_form.scss b/src/app/theme/sass/_form.scss
index 5fb2f431..7a289bb4 100644
--- a/src/app/theme/sass/_form.scss
+++ b/src/app/theme/sass/_form.scss
@@ -58,6 +58,14 @@ select.form-control {
   padding-left: 8px;
 }
 
+select.form-control:not([multiple]) option {
+  color: $dropdown-text;
+}
+
+select.form-control[multiple] option {
+  color: $default-text;
+}
+
 textarea.form-control {
   height: 96px;
 }