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 */