CSS refactoring

app/styles/_base.scss

@@ -7,3 +7,11 @@ body {
 }
 
 .clickable { cursor: pointer; }
+
+.modal-dialog { color: $navy; }
+
+.not-editable {
+  opacity: .5;
+  background-color: rgba($gray_light,.5);
+  cursor: default;
+}

app/styles/_variables_mixins.scss

@@ -32,9 +32,12 @@ $sidebar_sublink_text:  #c2d2e3;
 $view_sub_nav:          #6784a2;
 $content_border:        $blue_lightest;
 
+// from misc
 
-// end variables ------------/
+$table-header-color: rgba($navy_drk2,.7);
+$inactive-sort-indicator: rgba($navy_drk2,.3);
 
+// end variables ------------/
 
 // Mixins
 // -------------------------------------------/

app/styles/app.scss

@@ -1,27 +1,30 @@
+// Base styles
 @import 'variables_mixins';
 @import 'bootstrap';
 @import 'bootstrap-theme';
 @import 'typography';
 @import 'base';
 @import 'layout';
-@import 'index';
 @import 'print';
-@import 'temp_misc';
-@import 'sign_in_screen';
-@import 'loading_notice';
 
 // Components
-
-@import 'components/sidebar_nav';
-@import 'components/panel';
+@import 'components/buttons';
 @import 'components/form_styles';
-@import 'components/tab_nav';
-@import 'components/tab_content';
-@import 'components/pagination';
-@import 'components/patient_summary';
-@import 'components/patient_history';
 @import 'components/imaging';
 @import 'components/labs';
+@import 'components/loading_notice';
+@import 'components/pagination';
+@import 'components/panel';
+@import 'components/patient_history';
+@import 'components/patient_summary';
+@import 'components/sidebar_nav';
+@import 'components/tab_content';
+@import 'components/tab_nav';
+@import 'components/tables';
+@import 'components/typeahead';
+
+// Styles for specific views
+@import 'views/sign_in_screen';
 
 // NOTE: do not place styles in this file
 // If you have styles to add, put them in

app/styles/components/_buttons.scss

@@ -0,0 +1,15 @@
+// Loading icon from http://www.bootply.com/128062
+.glyphicon-refresh-animate {
+  -webkit-animation: spin2 .7s infinite linear;
+  -animation: spin .7s infinite linear;
+}
+
+@-webkit-keyframes spin2 {
+  from { -webkit-transform: rotate(0deg); }
+  to { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  from { transform: scale(1) rotate(0deg); }
+  to { transform: scale(1) rotate(360deg); }
+}

app/styles/components/_form_styles.scss

@@ -10,3 +10,23 @@
 .checkbox-label-space {
   top: 25px;
 }
+
+// mark input fields as required
+.required {
+  .control-label::after {
+    color: $red;
+    content: '*';
+  }
+}
+
+.input-group-addon {
+  border: 0;
+  background-color: $white;
+}
+
+// I *think* this belongs here (extracting from
+// temp_styles), but not actually sure if we
+// even use this anymore
+.container {
+  label { font-weight: 300; }
+}

app/styles/components/_tables.scss

@@ -0,0 +1,12 @@
+.table-header {
+  background-color: $navy_light;
+  color: $table-header-color;
+
+  .sortable-column {
+    cursor: pointer;
+
+    .inactive {
+      color: $inactive-sort-indicator;
+    }
+  }
+}

app/styles/components/_typeahead.scss

@@ -0,0 +1,44 @@
+.twitter-typeahead {
+  width: 100%;
+
+  .tt-query,
+  .tt-hint { margin-bottom: 0; }
+}
+
+.tt-menu {
+  border: 1px solid rgba(0,0,0,.1);
+  border-radius: 0 0 3px 3px;
+  box-shadow: 0 3px 5px rgba(0,0,0,.1);
+  background-clip: padding-box;
+  background-color: $white;
+  padding: 5px 0;
+  width: 100%;
+  min-width: 160px;
+  max-height: 110px;
+  overflow-y: scroll;
+  overflow-x: none;
+
+  .query-results { margin-bottom: 0; }
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 12px;
+
+  &.tt-is-under-cursor {
+    background-color: #0081c2;
+    background-image: linear-gradient(to bottom,#08c,#0077b3);
+    background-repeat: repeat-x;
+    color: $white;
+
+    a { color: $white; }
+  }
+
+  p { margin: 0; }
+}
+
+//Scrollable typeahead
+.scrollable-typeahead .tt-menu {
+  max-height: 200px;
+  overflow-y: auto;
+}