From 4bdf85b0f1c10dd165883f1a9c046a9d1da6390f Mon Sep 17 00:00:00 2001
From: linusbrolin <linus.b@gmail.com>
Date: Wed, 25 May 2016 11:07:10 +0200
Subject: [PATCH] removed most hardcoded css, instead rely on bootstrap css
 classes

Made the UI more standardized to use only Bootstrap css classes where
possible and minimal hardcoded css rules.
The UI now also more closely looks like other Bootstrap UI elements.
---
 components/css/ng2-select.css | 273 ----------------------------------
 components/select/select.ts   | 110 +++++++++++---
 2 files changed, 92 insertions(+), 291 deletions(-)
 delete mode 100644 components/css/ng2-select.css

diff --git a/components/css/ng2-select.css b/components/css/ng2-select.css
deleted file mode 100644
index c0aac6a3..00000000
--- a/components/css/ng2-select.css
+++ /dev/null
@@ -1,273 +0,0 @@
-
-/* Style when highlighting a search. */
-.ui-select-highlight {
-  font-weight: bold;
-}
-
-.ui-select-offscreen {
-  clip: rect(0 0 0 0) !important;
-  width: 1px !important;
-  height: 1px !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  position: absolute !important;
-  outline: 0 !important;
-  left: 0px !important;
-  top: 0px !important;
-}
-
-
-.ui-select-choices-row:hover {
-  background-color: #f5f5f5;
-}
-
-/* Select2 theme */
-
-/* Mark invalid Select2 */
-.ng-dirty.ng-invalid > a.select2-choice {
-    border-color: #D44950;
-}
-
-.select2-result-single {
-  padding-left: 0;
-}
-
-.select2-locked > .select2-search-choice-close{
-  display:none;
-}
-
-.select-locked > .ui-select-match-close{
-    display:none;
-}
-
-body > .select2-container.open {
-  z-index: 9999; /* The z-index Select2 applies to the select2-drop */
-}
-
-/* Handle up direction Select2 */
-.ui-select-container[theme="select2"].direction-up .ui-select-match {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
-    border-top-style: solid;
-
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
-
-    margin-top: -4px; /* FIXME hardcoded value :-/ */
-}
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search {
-    margin-top: 4px; /* FIXME hardcoded value :-/ */
-}
-.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match {
-    border-bottom-color: #5897fb;
-}
-
-/* Selectize theme */
-
-/* Helper class to show styles when focus */
-.selectize-input.selectize-focus{
-  border-color: #007FBB !important;
-}
-
-/* Fix input width for Selectize theme */
-.selectize-control > .selectize-input > input {
-  width: 100%;
-}
-
-/* Fix dropdown width for Selectize theme */
-.selectize-control > .selectize-dropdown {
-  width: 100%;
-}
-
-/* Mark invalid Selectize */
-.ng-dirty.ng-invalid > div.selectize-input {
-    border-color: #D44950;
-}
-
-/* Handle up direction Selectize */
-.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
-
-    margin-top: -2px; /* FIXME hardcoded value :-/ */
-}
-
-/* Bootstrap theme */
-
-/* Helper class to show styles when focus */
-.btn-default-focus {
-  color: #333;
-  background-color: #EBEBEB;
-  border-color: #ADADAD;
-  text-decoration: none;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-.ui-select-bootstrap .ui-select-toggle {
-  position: relative;
-}
-
-.ui-select-bootstrap .ui-select-toggle > .caret {
-  position: absolute;
-  height: 10px;
-  top: 50%;
-  right: 10px;
-  margin-top: -2px;
-}
-
-/* Fix Bootstrap dropdown position when inside a input-group */
-.input-group > .ui-select-bootstrap.dropdown {
-  /* Instead of relative */
-  position: static;
-}
-
-.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
-  border-radius: 4px; /* FIXME hardcoded value :-/ */
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
-  border-radius: 4px !important; /* FIXME hardcoded value :-/ */
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.ui-select-bootstrap > .ui-select-match > .btn{
-  /* Instead of center because of .btn */
-  text-align: left !important;
-}
-
-.ui-select-bootstrap > .ui-select-match > .caret {
-  position: absolute;
-  top: 45%;
-  right: 15px;
-}
-
-.ui-disabled {
-    background-color: #eceeef ;
-    border-radius: 4px;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 5;
-    opacity: 0.6;
-    top: 0;
-    left: 0;
-    cursor: not-allowed;
-}
-
-/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
-.ui-select-bootstrap > .ui-select-choices {
-  width: 100%;
-  height: auto;
-  max-height: 200px;
-  overflow-x: hidden;
-  margin-top: -1px;
-}
-
-body > .ui-select-bootstrap.open {
-  z-index: 1000; /* Standard Bootstrap dropdown z-index */
-}
-
-.ui-select-multiple.ui-select-bootstrap {
-  height: auto;
-  padding: 3px 3px 0 3px;
-}
-
-.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
-  background-color: transparent !important; /* To prevent double background when disabled */
-  border: none;
-  outline: none;
-  height: 1.666666em;
-  margin-bottom: 3px;
-}
-
-.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
-  font-size: 1.6em;
-  line-height: 0.75;
-}
-
-.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
-  outline: 0;
-  margin: 0 3px 3px 0;
-}
-
-.ui-select-multiple .ui-select-match-item {
-  position: relative;
-}
-
-.ui-select-multiple .ui-select-match-item.dropping-before:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 100%;
-  height: 100%;
-  margin-right: 2px;
-  border-left: 1px solid #428bca;
-}
-
-.ui-select-multiple .ui-select-match-item.dropping-after:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 100%;
-  height: 100%;
-  margin-left: 2px;
-  border-right: 1px solid #428bca;
-}
-
-.ui-select-bootstrap .ui-select-choices-row>a {
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    color: #333;
-    white-space: nowrap;
-}
-
-.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus {
-    text-decoration: none;
-    color: #262626;
-    background-color: #f5f5f5;
-}
-
-.ui-select-bootstrap .ui-select-choices-row.active>a {
-    color: #fff;
-    text-decoration: none;
-    outline: 0;
-    background-color: #428bca;
-}
-
-.ui-select-bootstrap .ui-select-choices-row.disabled>a,
-.ui-select-bootstrap .ui-select-choices-row.active.disabled>a {
-    color: #777;
-    cursor: not-allowed;
-    background-color: #fff;
-}
-
-/* fix hide/show angular animation */
-.ui-select-match.ng-hide-add,
-.ui-select-search.ng-hide-add {
-    display: none !important;
-}
-
-/* Mark invalid Bootstrap */
-.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
-    border-color: #D44950;
-}
-
-/* Handle up direction Bootstrap */
-.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
-}
diff --git a/components/select/select.ts b/components/select/select.ts
index c1f39d99..c50f0f3c 100644
--- a/components/select/select.ts
+++ b/components/select/select.ts
@@ -5,16 +5,87 @@ import {OptionsBehavior} from './select-interfaces';
 import {escapeRegexp} from './common';
 import {OffClickDirective} from './off-click';
 
+let styles = `
+.ui-select-toggle {
+  position: relative;
+
+  /* hardcoded, should use variable from bootstrap */
+  padding: 0.375rem 0.75rem;
+}
+
+/* Fix Bootstrap dropdown position when inside a input-group */
+.input-group > .dropdown {
+  /* Instead of relative */
+  position: static;
+}
+
+.ui-select-match > .btn {
+  /* Instead of center because of .btn */
+  text-align: left !important;
+}
+
+.ui-select-match > .caret {
+  position: absolute;
+  top: 45%;
+  right: 15px;
+}
+
+.ui-disabled {
+  background-color: #eceeef;
+  border-radius: 4px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  opacity: 0.6;
+  top: 0;
+  left: 0;
+  cursor: not-allowed;
+}
+
+.ui-select-choices {
+  width: 100%;
+  height: auto;
+  max-height: 200px;
+  overflow-x: hidden;
+  margin-top: 0;
+}
+
+.ui-select-multiple .ui-select-choices {
+  margin-top: 1px;
+}
+
+.ui-select-multiple {
+  height: auto;
+  padding: 3px 3px 0 3px;
+}
+
+.ui-select-multiple input.ui-select-search {
+  background-color: transparent !important; /* To prevent double background when disabled */
+  border: none;
+  outline: none;
+  height: 1.9em;
+  margin-bottom: 3px;
+
+  /* hardcoded, should use variable from bootstrap, but must be adjusted because... reasons */
+  padding: 0.375rem 0.55rem;
+}
+
+.ui-select-multiple .ui-select-match-item {
+  outline: 0;
+  margin: 0 3px 3px 0;
+}
+`;
+
 let optionsTemplate = `
     <ul *ngIf="optionsOpened && options && options.length > 0 && !firstItemHasChildren"
-        class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
-      <li class="ui-select-choices-group">
-        <div *ngFor="let o of options"
-             class="ui-select-choices-row"
+        class="ui-select-choices dropdown-menu" role="menu">
+      <li *ngFor="let o of options" role="menuitem">
+        <div class="ui-select-choices-row"
              [class.active]="isActive(o)"
              (mouseenter)="selectActive(o)"
              (click)="selectMatch(o, $event)">
-          <a href="javascript:void(0)" class="ui-select-choices-row-inner">
+          <a href="javascript:void(0)" class="dropdown-item">
             <div [innerHtml]="o.text | highlight:inputValue"></div>
           </a>
         </div>
@@ -22,10 +93,10 @@ let optionsTemplate = `
     </ul>
 
     <ul *ngIf="optionsOpened && options && options.length > 0 && firstItemHasChildren"
-        class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
-      <li *ngFor="let c of options; let index=index" class="ui-select-choices-group">
-        <div class="divider" *ngIf="index > 0"></div>
-        <div class="ui-select-choices-group-label dropdown-header">{{c.text}}</div>
+        class="ui-select-choices dropdown-menu" role="menu">
+      <li *ngFor="let c of options; let index=index" role="menuitem">
+        <div class="divider dropdown-divider" *ngIf="index > 0"></div>
+        <div class="dropdown-header">{{c.text}}</div>
 
         <div *ngFor="let o of c.children"
              class="ui-select-choices-row"
@@ -33,23 +104,25 @@ let optionsTemplate = `
              (mouseenter)="selectActive(o)"
              (click)="selectMatch(o, $event)"
              [ngClass]="{'active': isActive(o)}">
-          <a href="javascript:void(0)" class="ui-select-choices-row-inner">
+          <a href="javascript:void(0)" class="dropdown-item">
             <div [innerHtml]="o.text | highlight:inputValue"></div>
           </a>
         </div>
       </li>
     </ul>
 `;
+
 @Component({
   selector: 'ng-select',
   directives: [OffClickDirective],
   pipes: [HighlightPipe],
+  styles: [styles],
   template: `
   <div tabindex="0"
      *ngIf="multiple === false"
      (keyup)="mainClick($event)"
      [offClick]="clickedOutside"
-     class="ui-select-container ui-select-bootstrap dropdown open">
+     class="ui-select-container dropdown open">
     <div [ngClass]="{'ui-disabled': disabled}"></div>
     <div class="ui-select-match"
          *ngIf="!inputMode">
@@ -64,8 +137,8 @@ let optionsTemplate = `
         <i class="dropdown-toggle pull-right"></i>
         <i class="caret pull-right"></i>
         <a *ngIf="allowClear && active.length>0" style="margin-right: 10px; padding: 0;"
-          (click)="remove(activeOption)" class="btn btn-xs btn-link pull-right">
-          <i class="glyphicon glyphicon-remove"></i>
+          (click)="remove(activeOption)" class="close pull-right">
+          &times;
         </a>
       </span>
     </div>
@@ -83,16 +156,17 @@ let optionsTemplate = `
      *ngIf="multiple === true"
      (keyup)="mainClick($event)"
      (focus)="focusToInput('')"
-     class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open">
+     class="ui-select-container ui-select-multiple dropdown form-control open">
     <div [ngClass]="{'ui-disabled': disabled}"></div>
     <span class="ui-select-match">
         <span *ngFor="let a of active">
-            <span class="ui-select-match-item btn btn-default btn-secondary btn-xs"
+            <span class="ui-select-match-item btn btn-default btn-secondary btn-sm"
                   tabindex="-1"
                   type="button"
                   [ngClass]="{'btn-default': true}">
-               <a class="close ui-select-match-close"
-                  (click)="remove(a)">&nbsp;&times;</a>
+               <a class="close"
+                  style="margin-left: 10px; padding: 0;"
+                  (click)="remove(a)">&times;</a>
                <span>{{a.text}}</span>
            </span>
         </span>
@@ -106,7 +180,7 @@ let optionsTemplate = `
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
-           class="ui-select-search input-xs"
+           class="form-control ui-select-search"
            placeholder="{{active.length <= 0 ? placeholder : ''}}"
            role="combobox">
     ${optionsTemplate}