/* * # Semantic - Search * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Search *******************************/ .ui.search { position: relative; text-shadow: none; font-style: normal; font-weight: normal; } .ui.search input { -webkit-border-radius: 500rem; -moz-border-radius: 500rem; border-radius: 500rem; } /*-------------- Button ---------------*/ .ui.search > .button { position: relative; z-index: 2; float: right; margin: 0px 0px 0px -15px; padding: 6px 15px 7px; -webkit-border-radius: 0px 15px 15px 0px; -moz-border-radius: 0px 15px 15px 0px; border-radius: 0px 15px 15px 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /*-------------- Results ---------------*/ .ui.search .results { display: none; position: absolute; z-index: 999; top: 100%; left: 0px; overflow: hidden; background-color: #FFFFFF; margin-top: 0.5em; width: 380px; font-size: 0.875em; line-height: 1.2; color: #555555; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset ; -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset ; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset ; } .ui.search .result { cursor: pointer; overflow: hidden; padding: 0.5em 1em; } .ui.search .result:first-child { border-top: none; } .ui.search .result .image { background: #F0F0F0; margin-right: 10px; float: left; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 38px; height: 38px; } .ui.search .result .image img { display: block; width: 38px; height: 38px; } .ui.search .result .image ~ .info { float: none; margin-left: 50px; } .ui.search .result .info { float: left; } .ui.search .result .title { font-weight: bold; color: rgba(0, 0, 0, 0.8); } .ui.search .result .description { color: rgba(0, 0, 0, 0.6); } .ui.search .result .price { float: right; color: #5BBD72; font-weight: bold; } /*-------------- Message ---------------*/ .ui.search .message { padding: 1em; } .ui.search .message .text .title { margin: 0em 0em 0.5rem; font-size: 1.25rem; font-weight: bold; color: rgba(0, 0, 0, 0.8); } .ui.search .message .text .description { margin: 0em; font-size: 1rem; color: rgba(0, 0, 0, 0.5); } /*-------------- Categories ---------------*/ .ui.search .results .category { background-color: #FAFAFA; border-top: 1px solid rgba(0, 0, 0, 0.1); -webkit-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in; -ms-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } .ui.search .results .category:first-child { border-top: none; } .ui.search .results .category > .name { float: left; padding: 12px 0px 0px 8px; font-weight: bold; color: #777777; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); } .ui.search .results .category .result { background-color: #FFFFFF; margin-left: 80px; border-left: 1px solid rgba(0, 0, 0, 0.1); } /* View All Results */ .ui.search .all { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); background-color: #FAFAFA; height: 2em; line-height: 2em; color: rgba(0, 0, 0, 0.6); font-weight: bold; text-align: center; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.search .result:hover, .ui.search .category .result:hover { background-color: #F8F8F8; } .ui.search .all:hover { background-color: #F0F0F0; } /*-------------- Loading ---------------*/ .ui.search.loading .input .icon { background: url(../images/loader-mini.gif) no-repeat 50% 50%; } .ui.search.loading .input .icon:before, .ui.search.loading .input .icon:after { display: none; } /*-------------- Active ---------------*/ .ui.search .results .category.active { background-color: #F1F1F1; } .ui.search .results .category.active > .name { color: #333333; } .ui.search .result.active, .ui.search .category .result.active { background-color: #FBFBFB; } .ui.search .result.active .title { color: #000000; } .ui.search .result.active .description { color: #555555; } /******************************* Variations *******************************/ /* Large */ .ui.search .large.result .image, .ui.search .large.result .image img { width: 50px; height: 50px; } .ui.search .large.results .indented.info { margin-left: 65px; } .ui.search .large.results .info .title { font-size: 16px; } .ui.search .large.results .info .description { font-size: 11px; }