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

src/app/pages/forms/components/inputs/components/selectInputs/index.ts

@@ -0,0 +1 @@
+export * from './selectInputs.component';

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() { }
+}

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>

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>

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,

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;
 }