searchkit-rails 0.0.1 → 0.0.2

data/lib/assets/stylesheets/searchkit/components/_loader.scss

@@ -0,0 +1,28 @@
+.sk-spinning-loader {
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 2px solid rgba(0, 0, 0, 0.2);
+  border-right: 2px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+  border-left: 2px solid #000;
+  transform: translateZ(0);
+  animation: spinning-loader 1.1s infinite linear;
+}
+.sk-spinning-loader,
+.sk-spinning-loader:after {
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes spinning-loader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_menu-filter.scss

@@ -0,0 +1,24 @@
+@import "filter-item.scss";
+@import "../vars.scss";
+
+.sk-menu-list {
+
+  &__header {
+    margin-bottom: 5px;
+    font-weight: $sk-bold-weight;
+    font-size: $sk-heading-font-size;
+  }
+
+  &__options {
+
+  }
+
+  &__items {
+
+  }
+
+  &-option {
+    @include filter-option;
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_no-hits.scss

@@ -0,0 +1,20 @@
+@import "../vars.scss";
+@import "actions.scss";
+
+.sk-no-hits {
+  text-align:center;
+  margin-top:60px;
+  color: $sk-text-color;
+
+  &__info {
+    font-size:$sk-heading-font-size;
+  }
+
+  &__steps {
+    margin-top:20px;
+  }
+
+  &__step-action {
+    @extend .sk-action-button;
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_numeric-refinement-list-filter.scss

@@ -0,0 +1,28 @@
+@import "filter-item.scss";
+@import "../vars.scss";
+
+.sk-numeric-refinement-list {
+
+  &__header {
+    margin-bottom: 5px;
+    font-weight: $sk-bold-weight;
+    font-size: $sk-heading-font-size;
+  }
+
+  &.is-disabled  {
+    display:none;
+  }
+
+  &__options {
+
+  }
+
+  &__items {
+
+  }
+
+  &-option {
+    @include filter-option;
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_pagination.scss

@@ -0,0 +1,12 @@
+@import "../vars.scss";
+
+.sk-pagination-select {
+}
+
+.sk-pagination-navigation {
+
+  .sk-toggle-option:first-child,
+  .sk-toggle-option:last-child {
+    flex: 4;
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_panel.scss

@@ -0,0 +1,61 @@
+@import "../vars.scss";
+
+.sk-layout__filters {
+  .sk-panel {
+    margin-bottom: 16px;
+  }
+}
+
+.sk-action-bar {
+  .sk-panel {
+    &__header {
+      display: none;
+    }
+  }
+}
+
+.sk-panel {
+  width: 100%;
+
+  &__header {
+    color: $sk-title-color;
+    margin-bottom: 5px;
+    font-weight: $sk-bold-weight;
+    font-size: $sk-heading-font-size;
+
+    &.is-collapsable  {
+      cursor: pointer;
+      user-select: none;
+      padding-left:15px;
+      position: relative;
+
+      &:after {
+        content:"";
+        display:block;
+        position:absolute;
+        top:50%;
+        margin-top:-3px;
+        left: -1px;
+        @include sk-arrow-down(5px);
+      }
+
+      &.is-collapsed:after {
+        @include sk-arrow-right(5px);
+        margin-top:-5px;
+        left: 0;
+      }
+
+    }
+
+  }
+
+  &__content {
+    &.is-collapsed  {
+      display:none;
+    }
+  }
+
+  &.is-disabled  {
+    display:none;
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_range-filter.scss

@@ -0,0 +1,55 @@
+@import "~rc-slider/assets/index.css";
+@import "../vars.scss";
+
+.sk-range-filter {
+
+  &__header {
+    margin-bottom: 5px;
+    font-weight: $sk-bold-weight;
+    font-size: $sk-heading-font-size;
+  }
+
+  &.is-disabled {
+    display:none;
+  }
+
+  &.is-no-histogram .bar-chart {
+    margin-top:15px;
+  }
+
+  &-value-labels {
+    display:flex;
+    justify-content: space-between;
+    margin-top:5px;
+
+    &__min {
+      align-self: flex-start;
+      font-size:$sk-list-secondary-font-size;
+    }
+    &__max {
+      align-self: flex-end;
+      font-size:$sk-list-secondary-font-size;
+    }
+  }
+
+}
+
+.bar-chart {
+  height:50px;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  display:flex;
+  align-items: flex-end;
+
+  &__bar {
+    background:rgba(156,162,153,0.5);
+    flex:1;
+
+    &.is-out-of-bounds {
+      background:rgba(156,162,153,0.3);
+    }
+  }
+
+
+
+}

data/lib/assets/stylesheets/searchkit/components/_range-histogram.scss

@@ -0,0 +1,22 @@
+@import "../vars.scss";
+
+.sk-range-histogram {
+  height:50px;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  display:flex;
+  align-items: flex-end;
+
+  &__bar {
+    background:rgba(156,162,153,0.5);
+    flex:1;
+
+    &.is-out-of-bounds {
+      background:rgba(156,162,153,0.3);
+    }
+  }
+}
+
+.rc-tooltip {
+  font-family: $sk-font-family;
+}

data/lib/assets/stylesheets/searchkit/components/_range-input.scss

@@ -0,0 +1,37 @@
+@import "../vars.scss";
+
+.sk-range-input {
+  width: 100%;
+  display:flex;
+  align-content: center;
+
+  &__input {
+    flex:0 0 60px;
+    display: inline-block;
+    width: 60px;
+    border-radius: $sk-border-radius;
+    border: 1px solid $sk-border-color;
+    height:30px;
+    padding:0 10px;
+
+    &.is-error {
+      border-color: $sk-remove-action-color;
+    }
+  }
+
+  &__submit {
+    flex:0 0 auto;
+    @extend .sk-action-button;
+    background:white;
+    height:30px;
+    padding:0 10px;
+    margin-left:10px;
+  }
+
+  &__to-label {
+    line-height:30px;
+    margin: 0 10px;
+    color: $sk-text-color;
+    font-size: $sk-text-font-size;
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_range-slider.scss

@@ -0,0 +1,25 @@
+@import "../vars.scss";
+
+.sk-range-slider {
+  padding-bottom: 16px; // Take into account marks
+
+  .rc-slider-handle {
+    border-color: $sk-border-color;
+  }
+  .rc-slider-track {
+    background-color: rgba(156, 162, 153, 0.5);
+  }
+
+  .rc-slider-mark-text-active {
+    color: $sk-list-secondary-text-color;
+  }
+
+  .rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: $sk-list-secondary-text-color;
+  }
+}

data/lib/assets/stylesheets/searchkit/components/_refinement-list-filter.scss

@@ -0,0 +1,27 @@
+@import "filter-item.scss";
+@import "../vars.scss";
+
+.sk-refinement-list {
+
+  &__header {
+    margin-bottom:5px;
+    font-weight:$sk-bold-weight;
+    font-size: $sk-heading-font-size;
+  }
+
+  &.is-disabled  {
+    display:none;
+  }
+
+  &__view-more-action {
+    font-size:$sk-list-secondary-font-size;
+    color:$sk-action-text-color;
+    cursor:pointer;
+    margin-top:5px;
+  }
+
+  &-option {
+    @include filter-option;
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_reset-filters.scss

@@ -0,0 +1,19 @@
+@import "../vars.scss";
+
+.sk-reset-filters {
+  text-align:center;
+  border-radius:$sk-border-radius;
+  padding:10px 20px;
+  cursor:pointer;
+  color: $sk-active-bg-color;
+
+  &.is-disabled {
+    cursor:default;
+    color:$sk-disabled-text-color;
+  }
+
+  &__text {
+    font-size:$sk-list-secondary-font-size;
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_search-box.scss

@@ -0,0 +1,54 @@
+@import "../vars.scss";
+@import "./search-icon.scss";
+
+.sk-search-box {
+  flex:auto;
+
+  form {
+    display:flex;
+    margin:0;
+    position:relative;
+  }
+
+  &__icon {
+    flex:0 20px 20px;
+    margin-top:10px;
+    margin-left:10px;
+    &:before {
+      content:"";
+      @include search-icon;
+      background-size: contain;
+      height:20px;
+      width:20px;
+      display: block;
+    }
+    opacity:0.3;
+  }
+
+  &__text {
+    padding:10px 20px;
+    width:100%;
+    flex:3;
+    font-size:18px;
+    border:none;
+    &:focus {
+      outline:0;
+    }
+  }
+
+  &__action {
+    height:40px;
+    visibility: hidden;
+  }
+
+  &__loader {
+    flex:0 20px 20px;
+    align-self: flex-end;
+    margin:10px;
+
+    &.is-hidden {
+      display:none;
+    }
+  }
+
+}

data/lib/assets/stylesheets/searchkit/components/_search-icon.scss

@@ -0,0 +1,3 @@
+@mixin search-icon {
+  background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KCgo8IS0tIFRoZSBpY29uIGNhbiBiZSB1c2VkIGZyZWVseSBpbiBib3RoIHBlcnNvbmFsIGFuZCBjb21tZXJjaWFsIHByb2plY3RzIHdpdGggbm8gYXR0cmlidXRpb24gcmVxdWlyZWQsIGJ1dCBhbHdheXMgYXBwcmVjaWF0ZWQuIApZb3UgbWF5IE5PVCBzdWItbGljZW5zZSwgcmVzZWxsLCByZW50LCByZWRpc3RyaWJ1dGUgb3Igb3RoZXJ3aXNlIHRyYW5zZmVyIHRoZSBpY29uIHdpdGhvdXQgZXhwcmVzcyB3cml0dGVuIHBlcm1pc3Npb24gZnJvbSBpY29ubW9uc3RyLmNvbSAtLT4KCgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgoKPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGlkPSJtYWduaWZpZXItMi1pY29uIiBkPSJNNDYwLjM1NSw0MjEuNTlMMzUzLjg0NCwzMTUuMDc4YzIwLjA0MS0yNy41NTMsMzEuODg1LTYxLjQzNywzMS44ODUtOTguMDM3CgoJQzM4NS43MjksMTI0LjkzNCwzMTAuNzkzLDUwLDIxOC42ODYsNTBDMTI2LjU4LDUwLDUxLjY0NSwxMjQuOTM0LDUxLjY0NSwyMTcuMDQxYzAsOTIuMTA2LDc0LjkzNiwxNjcuMDQxLDE2Ny4wNDEsMTY3LjA0MQoKCWMzNC45MTIsMCw2Ny4zNTItMTAuNzczLDk0LjE4NC0yOS4xNThMNDE5Ljk0NSw0NjJMNDYwLjM1NSw0MjEuNTl6IE0xMDAuNjMxLDIxNy4wNDFjMC02NS4wOTYsNTIuOTU5LTExOC4wNTYsMTE4LjA1NS0xMTguMDU2CgoJYzY1LjA5OCwwLDExOC4wNTcsNTIuOTU5LDExOC4wNTcsMTE4LjA1NmMwLDY1LjA5Ni01Mi45NTksMTE4LjA1Ni0xMTguMDU3LDExOC4wNTZDMTUzLjU5LDMzNS4wOTcsMTAwLjYzMSwyODIuMTM3LDEwMC42MzEsMjE3LjA0MQoKCXoiLz4KCjwvc3ZnPgoK) no-repeat top left;
+}

data/lib/assets/stylesheets/searchkit/components/_select.scss

@@ -0,0 +1,38 @@
+@import "../vars.scss";
+
+.sk-select {
+  position:relative;
+  cursor:pointer;
+  max-height:30px;
+  display:inline-block;
+
+  &.is-disabled {
+    display:none
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance:    none;
+    appearance:         none;
+    background:$sk-selector-background;
+    padding:6px 10px;
+    padding-right: 30px;
+    border:1px solid $sk-selector-border-color;
+    outline:0;
+    font-weight:$sk-bold-weight;
+    font-size:$sk-text-font-size;
+    border-radius:$sk-border-radius;
+    color:$sk-selector-text-color;
+  }
+
+  &:after {
+    content:"";
+    position:absolute;
+    top:50%;
+    margin-top:-3px;
+    right:10px;
+    @include sk-arrow-down(6px);
+    pointer-events: none;
+  }
+
+}