ting_search_carousel

.gitignore

@@ -0,0 +1 @@
+.sass-cache/

config.rb

@@ -0,0 +1,23 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+output_style = :expanded
+environment = :production
+
+relative_assets = true
+
+line_comments = false
+color_output = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

css/ting_search_carousel.css

@@ -1,195 +1,121 @@
-.ting-search-carousel {
-  width: 100%;
-}
-
-.ting-search-carousel .search-controller {
-  height: 20px;
-  list-style: none outside none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.ting-search-carousel .search-controller li.active {
-  background: none repeat scroll 0 0 #918F91;
-}
-
-.ting-search-carousel .search-controller li {
-  background: none repeat scroll 0 0 #D1D9D7;
-  float: left;
-  font-size: 11px;
-  height: 18px;
-  line-height: 15px;
-  margin: -1px 2px 0 0;
-  padding: 0 17px;
-}
-
-.ting-search-carousel .search-controller li a {
-  font-size: 11px;
-  line-height: 15px;
-}
-
-.ting-search-carousel .ting-search-results {
+/* ==========================================================================
+   ting search carousel styling
+   ========================================================================== */
+.rs-carousel,
+.rs-carousel-mask,
+.rs-carousel-runner {
   position: relative;
-  height: 200px;
 }
 
-.ting-search-carousel .ting-search-results .subtitle {
-  font-size: 42px;
-  font-weight: normal;
-  line-height: 0.9;
-  margin: 10px 0 0 40px;
+.rs-carousel-mask,
+.rs-carousel-runner {
   overflow: hidden;
-  padding: 10px 0 10px 10px;
-  text-transform: uppercase;
-  width: 250px;
 }
 
-.ting-search-carousel .ting-search-results .info {
-  height: 39px;
-  margin-top: -3px;
+.rs-carousel-inner {
   overflow: hidden;
-  width: 100px;
-}
-
-.ting-search-carousel .ting-search-results .info span {
-  display: block;
-  font-size: 10px;
-  line-height: 1.25;
-  text-align: center;
 }
 
-.ting-search-carousel .ting-rs-carousel, .subtitle {
-  float: left;
+rs-carousel-runner {
+  -moz-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
-/* carousel */
-.ting-search-carousel .rs-carousel {
-  opacity: 1 !important;
-  overflow: hidden;
-  width: 580px;
+.rs-carousel-transition .rs-carousel-runner {
+  -moz-transition: -moz-transform .400s ease;
+  -webkit-transition: -webkit-transform .400s ease;
+  -o-transition: -o-transform .400s ease;
+  -ms-transition: -ms-transform .400s ease;
+  transition: transform .400s ease;
 }
 
-.ting-search-carousel .rs-carousel .rs-carousel-mask {
-  position:relative;
-  height: 200px;
-}
-
-.ting-search-carousel .rs-carousel .rs-carousel-runner {
-  left: 0;
-  list-style: none;
-  margin: 0;
+/* Pagination and previous and next buttons
+   ========================================================================== */
+.rs-carousel-action-prev,
+.rs-carousel-action-next {
+  background-image: url('../images/arrows.png');
+  height: 55px;
   overflow: hidden;
-  padding: 0;
+  margin-top: -27px;
   position: absolute;
-  width: 580px;
-}
-
-.ting-search-carousel .rs-carousel .rs-carousel-item img {
-  max-width: 112px;
-  height: 140px;
-}
-.ting-search-carousel .no-js .rs-carousel .rs-carousel-runner {
-  position: static;
-}
-
-.ting-search-carousel .rs-carousel .rs-carousel-item {
-  float: left;
-  height: 180px;
-  overflow: hidden;
-  padding-top: 20px;
-  text-align: center;
-  padding-right: 16px;
-  width: 100px;
-}
-
-.ting-search-carousel .rs-carousel.rs-carousel-vertical .rs-carousel-item {
-  float: none;
+  text-indent: -1000px;
+  top: 50%;
+  width: 55px;
 }
 
-/* pagination */
-.ting-search-carousel .rs-carousel-pagination {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.rs-carousel-action-next {
+  background-position: right 0;
+  right: 0;
 }
 
-.ting-search-carousel .rs-carousel-disabled .rs-carousel-pagination {
+.rs-carousel-disabled .rs-carousel-action-prev,
+.rs-carousel-disabled .rs-carousel-action-next {
   display: none;
 }
 
-.ting-search-carousel .rs-carousel-pagination-link {
-  display: inline;
-}
-
-.ting-search-carousel .rs-carousel-pagination-link a {
-  padding: 2px 6px;
-}
 
-.ting-search-carousel .rs-carousel-pagination-link a:hover {
-  text-decoration: none;
-}
-
-.ting-search-carousel .rs-carousel-pagination-link-active a {
-  background: #444;
-}
-
-/* next & prev actions */
-.ting-search-carousel .rs-carousel-disabled .rs-carousel-action-next,
-.ting-search-carousel .rs-carousel-disabled .rs-carousel-action-prev {
-  display: none;
-}
-
-.ting-search-carousel .rs-carousel-action-next,
-.ting-search-carousel .rs-carousel-action-prev {
-  background-image: url('../images/buttons.png');
+/* Carousel content, mask, title etc.
+   ========================================================================== */
+.ajax-loader {
+  background: transparent url('../images/ajax-loader.gif') no-repeat center center;
+  left: 50%;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -110px;
   position: absolute;
-  top: 86px;
-  height: 35px;
-  outline: none;
-  text-indent: -9999px;
-  width: 35px;
+  top: 50%;
+  width: 220px;
 }
 
-.ting-search-carousel .rs-carousel-action-prev {
-  left: -15px;
+.rs-carousel-mask,
+.rs-carousel-mask ul {
+  display: inline-block;
+  vertical-align: top;
 }
 
-.ting-search-carousel .rs-carousel-action-next {
-  right: -15px;
-  background-position: 0 -35px;
+.rs-carousel-mask {
+  width: 100%;
 }
 
-.ting-search-carousel .rs-carousel-action-prev:hover {
-  background-position: 70px 0;
+.rs-carousel-mask ul {
+  margin: 0;
+  list-style: none;
 }
 
-.ting-search-carousel .rs-carousel-action-next:hover {
-  background-position: 70px -35px;
+.rs-carousel-mask li {
+  float: left;
+  width: 100px;
+  text-align: center;
 }
 
-.ting-search-carousel .rs-carousel-action-disabled {
-  background-position: 35px 0 !important;
+.rs-carousel-item-image {
+  display: block;
 }
 
-.ting-search-carousel .rs-carousel-action-prev + .rs-carousel-action-disabled  {
-  background-position: 35px -35px !important;
+.rs-carousel-item-image img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.ting-search-carousel .rs-carousel-action-disabled {
-  color: gray;
-  cursor: default;
-}
 
-.ting-search-carousel .rs-carousel-pagination {
-  display: none;
+/* Carousel tabs
+   ========================================================================== */
+.rs-carousel-tabs ul {
+  margin: 0;
+  position: relative;
+  text-align: center;
 }
 
-.search-carousel-query {
-  float: left;
+.rs-carousel-tabs ul li {
+  display: table-cell;
+  vertical-align: top;
+  text-align: center;
 }
 
-.sort-hidden, .search-query-hidden {
-  display: none;
+.rs-carousel-tabs ul li.active a {
+  position: relative;
 }
-