From 9afc8bc7c46e5aee41d881402332702fb73f1616 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 28 Nov 2015 20:39:11 +0800
Subject: [PATCH] refactor search css into scss for clearer organization, plus
 do some fixes to the typeahead css

---
 app/assets/stylesheets/search.scss.erb | 676 +++++++++++++------------
 1 file changed, 361 insertions(+), 315 deletions(-)

diff --git a/app/assets/stylesheets/search.scss.erb b/app/assets/stylesheets/search.scss.erb
index 5d56d120..affde153 100644
--- a/app/assets/stylesheets/search.scss.erb
+++ b/app/assets/stylesheets/search.scss.erb
@@ -1,40 +1,24 @@
-.sidebarSearch {
-    float:left;
-    height: 32px;
-    position: relative;
-}
-
 #searchLoading {
-    height: 24px;
-    width: 24px;
-    position: absolute;
-    top: 4px;
-    right: 76px;
-    display: none;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  top: 4px;
+  right: 76px;
+  display: none;
 }
 
-.unauthenticated .homePage .sidebarSearchIcon {
+.unauthenticated {
+  .homePage .sidebarSearchIcon {
     border-radius: 2px;
-}
-.sidebarSearchIcon {
-    float: left;
-    width: 72px;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
-    height: 32px;
-    background: #4fb5c0 url(<%= asset_data_uri('search.png') %>) no-repeat center center;
-    background-size: 32px 32px;
-    cursor: pointer;
-}
-.sidebarSearch .twitter-typeahead, .sidebarSearch .sidebarSearchField {
-    float: left;
-}
+  }
 
-.unauthenticated .homePage .sidebarSearchField,
-.unauthenticated .homePage .sidebarSearch .tt-hint {
+  .homePage .sidebarSearchField,
+  .homePage .sidebarSearch .tt-hint {
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
+  }
 }
+
 .explorePage .sidebarSearchField,
 .explorePage .sidebarSearch .tt-hint {
 	width: 380px;
@@ -42,13 +26,97 @@
 }
 
 .sidebarSearchField {
-    color: #424242;
+  color: #424242;
 }
-.sidebarSearch .tt-hint {
+
+.sidebarSearchIcon {
+  float: left;
+  width: 72px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  height: 32px;
+  background: #4fb5c0 url(<%= asset_data_uri('search.png') %>) no-repeat center center;
+  background-size: 32px 32px;
+  cursor: pointer;
+}
+
+.autoOptions #mapContribs { 
+  width: 15px;
+  height: 15px;
+  border: 1px solid #424242;
+  margin-top: 4px;
+  margin-left: 4px;
+}
+
+.mapContributorsIcon span {
+  margin-left: 5px;
+}
+
+.mapContributorsIcon li span {
+  margin-left: 10px;
+}
+
+.searchHeader {
+  height: 42px;
+  width: 100%;
+  position: relative;
+}
+.searchTopicsHeader {
+  background: #4fc4a8;
+}
+.searchMapsHeader {
+  background: #994fc0;
+}
+.searchMappersHeader {
+  background: #c04f4f;
+}
+
+.resultmap, .resulttopic, .resultmapper, .resultnoresult {
+  min-height: 48px;
+  display: table;
+}
+
+.canEditMap button.addToMap {
+  display: block;
+}
+
+.tipUserImage {
+  position: absolute;
+  top: 0px;
+  left: 7px;
+  border-radius: 14px;
+}
+
+.sidebarSearchField {
+  height: 20px;
+  border-top: 1px solid #BDBDBD;
+  border-bottom: 1px solid #BDBDBD;
+  border-left: none;
+  border-right: none;
+  padding: 5px 0 5px 0;
+  width: 0px;
+  margin: 0;
+  outline: none;
+  font-size: 14px;
+  line-height: 14px;
+  background: #F5F5F5; 
+  font-family: 'din-medium', helvetica, sans-serif;
+}
+
+/* main search selector */
+
+.sidebarSearch {
+  float:left;
+  height: 32px;
+  position: relative;
+
+  .twitter-typeahead,
+  .sidebarSearchField {
+    float: left;
+  }
+
+  .tt-hint {
     color: transparent;
-}
-.sidebarSearchField,
-.sidebarSearch .tt-hint {
     height: 20px;
     border-top: 1px solid #BDBDBD;
     border-bottom: 1px solid #BDBDBD;
@@ -62,212 +130,200 @@
     line-height: 14px;
     background: #F5F5F5; 
     font-family: 'din-medium', helvetica, sans-serif;
-}
-.sidebarSearch .tt-dropdown-menu {
+  }
+
+  .tt-dropdown-menu {
     top: 40px !important;
     background: #F5F5F5;
     width: 472px;
     overflow-y: auto;
     overflow-x: visible;
     box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 6px 3px rgba(0,0,0,0.23);
-}
 
-.autoOptions #mapContribs { 
-    width: 15px;
-    height: 15px;
-    border: 1px solid #424242;
-    margin-top: 4px;
-    margin-left: 4px;
-}
+    h3 {
+      text-transform: uppercase;
+      color: #F5F5F5;
+      font-size: 18px;
+      line-height: 18px;
+      margin: 12px 0 3px 16px;
+      float: left;
+    }
 
-.mapContributorsIcon span {
-    margin-left: 5px;
-}
+    .limitToMe {
+      float: left;
+      width: 12px;
+      height: 12px;
+      border: 1px;
+      color: #000000;
+      position: absolute;
+      top: 15px;
+      left: 136px;
+    }
 
-.mapContributorsIcon li span {
-    margin-left: 10px;
-}
+    .limitToMeLabel {
+      float: left;
+      font-family: 'din-medium', helvetica, sans-serif;
+      font-size: 12px;
+      color: #f5f5f5;
+      margin: 0;
+      position: absolute;
+      top: 15px;
+      left: 156px;
+    }
 
+    .minimizeResults,
+    .maximizeResults {
+      width: 32px;
+      height: 32px;
+      background-image: url(<%= asset_data_uri('arrowpermswhite_sprite.png') %>);
+      background-repeat: no-repeat;
+      cursor: pointer;
+      position: absolute;
+      top: 5px;
+      left: 410px;
+    }
+    .minimizeResults {
+      background-position: 0 0;
+    }
+    .maximizeResults {
+      background-position: -32px 0;
+    }
+  }/* tt-dropdown-menu */
 
-.searchHeader {
-    height: 42px;
-    width: 100%;
-    position: relative;
-}
-.searchTopicsHeader {
-    background: #4fc4a8;
-}
-.searchMapsHeader {
-    background: #994fc0;
-}
-.searchMappersHeader {
-    background: #c04f4f;
-}
-.sidebarSearch .tt-dropdown-menu h3 {
-    text-transform: uppercase;
-    color: #F5F5F5;
-    font-size: 18px;
-    line-height: 18px;
-    margin: 12px 0 3px 16px;
-    float: left;
-}
-.sidebarSearch .tt-dropdown-menu .limitToMe {
-    float: left;
-    width: 12px;
-    height: 12px;
-    border: 1px;
-    color: #000000;
-    position: absolute;
-    top: 15px;
-    left: 136px;
-}
-.sidebarSearch .tt-dropdown-menu .limitToMeLabel {
-    float: left;
-    font-family: 'din-medium', helvetica, sans-serif;
-    font-size: 12px;
-    color: #f5f5f5;
-    margin: 0;
-    position: absolute;
-    top: 15px;
-    left: 156px;
-}
-.sidebarSearch .tt-dropdown-menu .minimizeResults, .sidebarSearch .tt-dropdown-menu .maximizeResults {
-    width: 32px;
-    height: 32px;
-    background-image: url(<%= asset_data_uri('arrowpermswhite_sprite.png') %>);
-    background-repeat: no-repeat;
-    cursor: pointer;
-    position: absolute;
-    top: 5px;
-    left: 410px;
-}
-.sidebarSearch .tt-dropdown-menu .minimizeResults {
-    background-position: 0 0;
-}
-.sidebarSearch .tt-dropdown-menu .maximizeResults {
-    background-position: -32px 0;
-}
-.sidebarSearch .tt-dataset {
-    overflow: visible;
-}
-.sidebarSearch .tt-suggestion {
+  .tt-suggestion {
     position: relative;
     background: #FFF;
     padding: 8px 0;
-}
-.sidebarSearch .tt-is-under-cursor,
-.sidebarSearch .tt-suggestion:hover {
-    background: #E0E0E0;
-}
 
-.resultmap, .resulttopic, .resultmapper, .resultnoresult {
-    min-height: 48px;
-    display: table;
-}
-/*.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
-.sidebarSearch .tt-dataset-maps .tt-is-under-mouse-cursor .resultmap,
-.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic,
-.sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .resulttopic {
-    min-height: 48px;
-}*/
-.sidebarSearch .tt-suggestion .searchResIconWrapper {
-    display: table-cell;
-    vertical-align: middle;
-    height: 32px;
-    padding: 0 18px 0 28px;
-}
-.sidebarSearch .tt-suggestion .icon {
-    width: 32px;
-    height: 32px;
-    border-radius:16px;
-}
-.sidebarSearch .topicMetacode {
-    display: table-cell;
-    vertical-align: middle;
-    padding: 0 0 0 8px;
-    width: 70px;
-}
-.sidebarSearch .tt-dataset-topics .topicIcon {
-    width: 32px;
-    height: 32px;
-    margin: 0 auto;
-}
-.sidebarSearch .tt-dataset-topics .metacodeTip {
-    display: none;
-    margin: 0 auto;
-}
-.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip,
-.sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .metacodeTip {
-    display: block;
-    font-family: 'vinyl';
-    text-transform: uppercase;
-    font-style: italic;
-    font-size: 13px;
-    margin: 0 5px 0 2px;
-    text-align: center;
-}
-.sidebarSearch .tt-dataset-mappers .tt-suggestion .icon {
-    margin: 0px 0px 0px 0px;
-}
-.sidebarSearch .tt-dataset-mappers .resultText {
-    width: 150px;
-}
+    &:hover {
+      background: #E0E0E0;
+    }
+    .searchResIconWrapper {
+      display: table-cell;
+      vertical-align: middle;
+      height: 32px;
+      padding: 0 18px 0 28px;
+    }
+    .icon {
+      width: 32px;
+      height: 32px;
+      border-radius:16px;
+    }
+  }/* tt-suggestion */
 
-.sidebarSearch .resultText {
+  .tt-dataset {
+    overflow: visible;
+  }
+
+  .tt-dataset-maps {
+    .autoOptions {
+      width: 84px;
+    }
+  }/* .tt-dataset-maps */
+
+  .tt-dataset-topics {
+    .topicIcon {
+      width: 32px;
+      height: 32px;
+      margin: 0 auto;
+    }
+    .metacodeTip {
+      display: none;
+      margin: 0 auto;
+    }
+    .tt-cursor .metacodeTip,
+    .tt-suggestion:hover .metacodeTip {
+      display: block;
+      font-family: 'vinyl';
+      text-transform: uppercase;
+      font-style: italic;
+      font-size: 13px;
+      margin: 0 5px 0 2px;
+      text-align: center;
+    }
+  }/* tt-dataset-topics */
+
+  .tt-dataset-mappers {
+    .icon {
+      margin: 0px 0px 0px 0px;
+    }
+    .mappers .resultText {
+      width: 150px;
+    }
+    .autoOptions {
+      width: 235px;
+    }
+    .mapCount {
+      top: 8px;
+      left: 170px;
+    }
+    .mapperCreated {
+      left: 0px;
+      padding-left: 0px;
+      font-size: 12px;
+      font-family: 'din-medium', helvetica, sans-serif;
+      line-height: 24px;
+    }
+    .mapperGeneration {
+      top: 20px;
+      left: 0px;
+      padding-left: 0px;
+      font-size: 12px;
+      font-family: 'din-medium', helvetica, sans-serif;
+      line-height: 24px;
+    }
+  }/* tt-dataset-mappers */
+
+  .resultText {
     width: 260px;
     display: table-cell;
     padding-left: 8px;
     vertical-align: middle;
     word-wrap: break-word;
-}
-.sidebarSearch .resultTitle {
+  }
+  .resultTitle {
     font-weight: normal;
     font-size: 16px;
     line-height: 20px;
     width: 100%;
     font-family: 'din-regular', helvetica, sans-serif;
-}
-.sidebarSearch .resultDesc {
+  }
+  .resultDesc {
     font-size: 12px;
     line-height: 16px;
     width: 100%;
     font-style: italic;
     font-family: helvetica, sans-serif;
-}
-.sidebarSearch .tip {
-    display: none;
-}
-.sidebarSearch div.autoOptions {
+  }
+
+  .autoOptions {
     width: 114px;
     height: 48px;
     position: absolute;
     display: none;
     top: 8px;
     right: 0;
-}
-.tt-dataset-maps div.autoOptions {
-    width: 84px;
-}
-.sidebarSearch .tt-dataset-mappers .autoOptions {
-    width: 235px;
-}
-.sidebarSearch .tt-is-under-cursor .autoOptions,
-.sidebarSearch .tt-is-under-mouse-cursor .autoOptions {
+
+    a,
+    div,
+    button {
+      position: absolute;
+      padding: 0;
+      margin: 0;
+      border: none;
+      outline: none;
+    }
+  }/* .autoOptions */
+
+  .tt-cursor .autoOptions,
+  .tt-suggestion:hover .autoOptions {
     display: block;
-}
-.sidebarSearch .tt-suggestion .resultnoresult .autoOptions {
+  }
+  .tt-suggestion .resultnoresult .autoOptions {
     display: none;
-}
-.sidebarSearch .autoOptions button,
-.sidebarSearch .autoOptions a,
-.sidebarSearch .autoOptions div {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    border: none;
-    outline: none;
-}
-.sidebarSearch button.addToMap {
+  }
+
+  .addToMap {
     display:none;
     width: 24px;
     height: 24px;
@@ -277,15 +333,13 @@
     top: 12px;
     left: 80px;
     cursor: pointer;
-}
-.canEditMap button.addToMap {
-    display: block;
-}
-.sidebarSearch button.addToMap:hover {
-    background-position: -24px;
-}
 
-.sidebarSearch div.topicCount {
+    &:hover {
+      background-position: -24px;
+    }
+  }/* .addToMap */
+
+  .topicCount {
     width: 24px;
     height: 24px;
     background: url(<%= asset_data_uri('topic16.png') %>);
@@ -296,9 +350,9 @@
     padding-left: 18px;
     font-size: 12px;
     line-height: 24px;
-}
+  }
 
-.sidebarSearch div.mapCount {
+  .mapCount {
     width: 24px;
     height: 24px;
     background: url(<%= asset_data_uri('metamap16.png') %>);
@@ -308,8 +362,9 @@
     padding-left: 20px;
     font-size: 12px;
     line-height: 24px;
-}
-.sidebarSearch div.synapseCount {
+  }
+
+  .synapseCount {
     width: 24px;
     height: 24px;
     background: url(<%= asset_data_uri('synapse16.png') %>);
@@ -320,23 +375,17 @@
     padding-left: 20px;
     font-size: 12px;
     line-height: 24px;
-}
-.sidebarSearch div.topicOriginatorIcon {
-    width: 18px;
-    height: 18px;
-    padding: 3px;
-    top: 0;
-    left: 44px;
-}
-.sidebarSearch .topicOriginatorIcon img {
-    border-radius: 9px;
-}
+  }
 
-.sidebarSearch .topicOriginatorIcon .tip {
-    right: 30px;
-    top: 1px;
-}
-.sidebarSearch .tip {
+  .topicMetacode {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 0 0 0 8px;
+    width: 70px;
+  }
+
+  .tip {
+    display: none;
     position: absolute;
     background: #424242;
     width: auto;
@@ -350,73 +399,88 @@
     line-height: 12px;
     padding: 4px 4px 4px;
     z-index: 100;
-}
-.sidebarSearch .hoverForTip:hover .tip {
-    display: block;
-}
+  }
 
-.sidebarSearch .mapContributorsIcon .tip {
+  .topicOriginatorIcon {
+    width: 18px;
+    height: 18px;
+    padding: 3px;
+    top: 0;
+    left: 44px;
+
+    img {
+      border-radius: 9px;
+    }
+  
+    .tip {
+      right: 30px;
+      top: 1px;
+    }
+  
+    .tip:before {
+      top: 5px;
+      right: -4px;
+    }
+  }/* .topicOriginatorIcon */
+
+  .mapContributorsIcon .tip {
     right: 40px;
     top: -5px;
     padding-top: 5px;
     padding-bottom: 5px;
-}
+  }
 
-.sidebarSearch .hoverForTip .tip li {
-    padding-left: 28px;
-    padding-top: 4px;
-}
+  .hoverForTip{
+    &:hover .tip {
+      display: block;
+    }
 
-.tipUserImage {
-    position: absolute;
-    top: 0px;
-    left: 7px;
-    border-radius: 14px;
-}
+    .tip li {
+      padding-left: 28px;
+      padding-top: 4px;
+    }
+  
+    .tip:before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 4px solid #424242;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  
+    .tip {
+      right: 30px;
+    }
+    .tip:before {
+      right: -4px;
+    }
+  }/* .hoverForTip */
 
-.sidebarSearch .hoverForTip .tip:before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 4px solid #424242;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-}
-
-.sidebarSearch .hoverForTip.addToMap .tip {
-    right: 30px;
-}
-.sidebarSearch .hoverForTip.addToMap .tip:before {
-    right: -4px;
-}
-
-.sidebarSearch .mapContributorsIcon .tip:before {
-    top: 12px;
-    right: -4px;
-}
-
-.sidebarSearch .topicOriginatorIcon .tip:before {
-    top: 5px;
-    right: -4px;
-}
-
-.sidebarSearch .mapContributorsIcon .mapContributors {
-    top: auto;
-    right: 0;
-    bottom: 21px;
-    white-space: normal;
-    width: 200px;
-}
-.sidebarSearch div.mapContributorsIcon {
+  .mapContributorsIcon {
     height: 24px;
     top: 0;
     left: 44px;
     font-size: 12px;
     line-height: 24px;
-}
-.sidebarSearch div.topicPermission,
-.sidebarSearch div.mapPermission {
+
+    .tip:before {
+      top: 12px;
+      right: -4px;
+    }
+
+    .mapContributors {
+      top: auto;
+      right: 0;
+      bottom: 21px;
+      white-space: normal;
+      width: 200px;
+    }
+  }/* .mapContributorsIcon */
+
+  .topicPermission,
+  .mapPermission {
     width: 24px;
     height: 24px;
     background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
@@ -424,36 +488,18 @@
     background-size: 72px 48px !important;
     top: 24px;
     left: 44px;
-}
-.sidebarSearch div.topicPermission.commons,
-.sidebarSearch div.mapPermission.commons {
-    background-position: 0 0;
-}
-.sidebarSearch div.topicPermission.public,
-.sidebarSearch div.mapPermission.public {
-    background-position: -48px 0;
-}
-.sidebarSearch div.topicPermission.private,
-.sidebarSearch div.mapPermission.private {
-    background-position: -24px 0;
-}
 
-.sidebarSearch .tt-dataset-mappers div.mapCount {
-    top: 8px;
-    left: 170px;
-}
-.sidebarSearch .tt-dataset-mappers div.mapperCreated {
-    left: 0px;
-    padding-left: 0px;
-    font-size: 12px;
-    font-family: 'din-medium', helvetica, sans-serif;
-    line-height: 24px;
-}
-.sidebarSearch .tt-dataset-mappers div.mapperGeneration {
-    top: 20px;
-    left: 0px;
-    padding-left: 0px;
-    font-size: 12px;
-    font-family: 'din-medium', helvetica, sans-serif;
-    line-height: 24px;
-}
+    .commons,
+    .commons {
+      background-position: 0 0;
+    }
+    .public,
+    .public {
+      background-position: -48px 0;
+    }
+    .private,
+    .private {
+      background-position: -24px 0;
+    }
+  }/* .topicPermission, .mapPermission */
+}/* .sidebarSearch */