@bridgeline-digital/hawksearch-handlebars-ui 1.0.0-beta.0

package/src/scss/components/_range-slider.scss

@@ -0,0 +1,50 @@
+.range-slider {
+    padding: 0 12px;
+
+    &__container {
+        position: relative;
+        padding: 8px 0;
+    }
+
+    &__bar {
+        position: relative;
+        border: var(--container-border);
+        height: 8px;
+        background: var(--container-background);
+
+        &__active {
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 100%;
+            background: var(--color-accent);
+        }
+    }
+
+    &__handle {
+        display: block;
+        position: absolute;
+        top: 0;
+        outline: solid 1px var(--color-accent);
+        margin-left: -12px;
+        border: solid 3px var(--color-background);
+        border-radius: 100%;
+        width: 24px;
+        height: 24px;
+        padding: 4px;
+        background: var(--color-accent);
+        cursor: pointer;
+
+        &--min {
+            left: 0;
+        }
+
+        &--max {
+            left: 100%;
+        }
+
+        &:hover {
+            outline-width: 2px;
+        }
+    }
+}

package/src/scss/components/_search-results-item.scss

@@ -0,0 +1,64 @@
+hawksearch-results-item {
+    height: 100%;
+}
+
+.search-results-item {
+    &__sale-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 5px;
+        background: var(--container-background--alternate);
+    }
+
+    &__image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 var(--padding) var(--padding) var(--padding);
+        height: 200px;
+
+        img {
+            margin: 0;
+            max-height: 100%;
+        }
+    }
+
+    &__title {
+        display: block;
+        margin: 0 0 var(--padding-sm) 0;
+        font-size: 1.125rem;
+        font-weight: bold;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__price {
+        display: block;
+
+        &__original {
+            text-decoration: line-through;
+        }
+    }
+
+    &--content {
+        border-bottom: var(--container-border);
+        padding: 0 0 var(--padding) 0;
+
+        &:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+    }
+
+    &--product {
+        position: relative;
+        height: 100%;
+        padding: var(--padding);
+        border: var(--container-border);
+        background: var(--container-background);
+        text-align: center;
+    }
+}

package/src/scss/components/_search.scss

@@ -0,0 +1,4 @@
+.search {
+    position: relative;
+    margin: 0 0 var(--margin) 0;
+}

package/src/scss/components/_selected-facets.scss

@@ -0,0 +1,24 @@
+.selected-facet {
+    padding: var(--padding-xs);
+    background: var(--container-background--alternate);
+    white-space: nowrap;
+
+    &__field {
+        font-weight: bold;
+
+        &:after {
+            content: ':';
+        }
+    }
+
+    &__value {
+        &--excluded {
+            text-decoration: line-through;
+        }
+    }
+
+    hawksearch-icon {
+        position: relative;
+        top: -1px;
+    }
+}

package/src/scss/components/_sorting.scss

@@ -0,0 +1,2 @@
+.sorting {
+}

package/src/scss/components/_tabs.scss

@@ -0,0 +1,51 @@
+@use '../includes/breakpoints';
+
+.tabs {
+    $root: &;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: var(--padding-xs);
+    margin: 0 0 var(--padding) 0;
+
+    &__item {
+        display: block;
+        margin: 0 0 -1px 0;
+        border: var(--container-border);
+        padding: var(--padding-sm) var(--padding);
+        background: var(--container-background--alternate);
+        white-space: nowrap;
+        cursor: pointer;
+
+        &--selected {
+            background: var(--container-background);
+        }
+
+        &:hover {
+            color: var(--color-accent);
+        }
+    }
+
+    @include breakpoints.small {
+        & {
+            flex-direction: row;
+        }
+    }
+
+    @include breakpoints.medium {
+        & {
+            &:not(&--list) {
+                border-bottom: var(--container-border);
+                border-bottom-color: var(--container-background--alternate);
+                padding: 0 var(--padding);
+
+                #{$root}__item {
+                    &--selected {
+                        border-bottom-color: var(--container-background);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/components/_tooltips.scss

@@ -0,0 +1,29 @@
+.tooltip {
+    $root: &;
+
+    display: inline-flex;
+    cursor: pointer;
+
+    &__icon {
+    }
+
+    &__content {
+        display: none;
+    }
+
+    &:hover {
+        #{$root} {
+            &__content {
+                display: block;
+                position: fixed;
+                margin: calc(-0.5 * var(--padding) - 1px) 0 0 2rem;
+                box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+                max-width: 350px;
+                border: var(--container-border);
+                padding: calc(var(--padding) / 2);
+                background: var(--container-background);
+                z-index: 1;
+            }
+        }
+    }
+}

package/src/scss/general/_forms.scss

@@ -0,0 +1,82 @@
+.label {
+    display: block;
+    margin: 0 0 5px 0;
+    text-align: left;
+}
+
+input[type='text'],
+input[type='number'],
+input[type='search'],
+select {
+    display: block;
+    outline: none;
+    width: 100%;
+    border: var(--form-element-border);
+    border-radius: var(--form-element-border-radius);
+    padding: var(--padding-sm);
+    background: var(--form-element-background);
+    font-family: var(--default-font-family);
+    font-size: 1rem;
+    line-height: 1;
+    color: var(--default-font-color);
+
+    &:hover,
+    &:focus {
+        border: var(--form-element-border--focus);
+    }
+}
+
+select {
+    padding-right: var(--padding);
+}
+
+::placeholder {
+    color: var(--form-element-placeholder-color);
+}
+
+input[type='checkbox'] {
+    $size: 16px;
+
+    position: absolute;
+    width: $size;
+    height: $size;
+    clip: rect(0, 0, 0, 0);
+
+    + label {
+        display: block;
+        position: relative;
+        margin: 0 0 5px 0;
+        padding: 0 0 0 calc($size + var(--padding-sm));
+        cursor: pointer;
+
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: $size;
+            width: $size;
+            border: var(--form-element-border);
+        }
+
+        &:hover {
+            &:before {
+                border-color: var(--color-accent);
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &:checked {
+        + label {
+            &:before {
+                border-color: var(--color-accent);
+                background: var(--color-accent);
+            }
+        }
+    }
+}

package/src/scss/general/_grid-layout.scss

@@ -0,0 +1,44 @@
+@use 'sass:math';
+@use '../includes/breakpoints';
+
+.row {
+    @include breakpoints.all {
+        --gap: var(--padding);
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--gap);
+        margin: 0 0 var(--margin) 0;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &--tight {
+            --gap: var(--padding-xs);
+        }
+
+        &--reverse {
+            flex-direction: row-reverse;
+        }
+    }
+}
+
+.column {
+    @include breakpoints.all {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: 100%;
+
+        @for $i from 1 through 12 {
+            &--#{$i} {
+                flex-basis: calc(#{math.div(100%, 12) * $i} - (#{math.div(12 - $i, 12)} * var(--gap)));
+            }
+        }
+
+        &--pull-right {
+            margin-left: auto;
+        }
+    }
+}

package/src/scss/general/_images.scss

@@ -0,0 +1,3 @@
+img {
+    max-width: 100%;
+}

package/src/scss/general/_typography.scss

@@ -0,0 +1,15 @@
+p {
+    margin: 0 0 var(--padding) 0;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+a {
+    text-decoration: none;
+
+    &:hover {
+        color: var(--color-accent);
+    }
+}

package/src/scss/hawksearch.scss

@@ -0,0 +1,35 @@
+@use './includes/reset';
+@use './includes/general';
+@use './includes/components';
+@use './includes/utility-classes';
+
+:host {
+    --color-accent: var(--hawksearch-color-accent, #119ff7);
+    --color-secondary: var(--hawksearch-color-secondary, #ccc);
+    --color-secondary-light: var(--hawksearch-color-secondary-light, #f1f1f1);
+    --color-secondary-dark: var(--hawksearch-color-secondary-dark, #a0a0a0);
+    --color-background: var(--hawksearch-color-background, #fff);
+    --container-background: var(--hawksearch-container-background, var(--color-background));
+    --container-background--alternate: var(--hawksearch-container-background--alternate, var(--color-secondary-light));
+    --container-border: var(--hawksearch-container-border, solid 1px var(--color-secondary));
+    --default-line-height: var(--hawksearch-default-line-height, 1.25);
+    --default-font-color: var(--hawksearch-default-font-color, #333);
+    --default-font-family: var(--hawksearch-default-font-family, Arial, sans-serif);
+    --default-font-size: var(--hawksearch-default-font-size, 16px);
+    --form-element-background: var(--hawksearch-form-element-background, var(--color-background));
+    --form-element-border: var(--hawksearch-form-element-border, solid 1px var(--color-secondary));
+    --form-element-border--focus: var(--hawksearch-form-element-border--focus, solid 1px var(--color-accent));
+    --form-element-border-radius: var(--hawksearch-form-element-border-radius, 0);
+    --form-element-placeholder-color: var(--hawksearch-form-element-placeholder-color, var(--color-secondary-dark));
+    --margin: var(--hawksearch-margin, 32px);
+    --margin-sm: var(--hawksearch-margin-sm, calc(var(--margin) / 2));
+    --padding: var(--hawksearch-padding, 24px);
+    --padding-xs: var(--hawksearch-padding-xs, calc(var(--padding) / 4));
+    --padding-sm: var(--hawksearch-padding-sm, calc(var(--padding) / 2));
+    --secondary-font-color: var(--hawksearch-secondary-font-color, var(--color-secondary-dark));
+
+    font-family: var(--default-font-family);
+    font-size: var(--default-font-size);
+    color: var(--default-font-color);
+    line-height: var(--default-line-height);
+}

package/src/scss/includes/_breakpoints.scss

@@ -0,0 +1,51 @@
+@mixin small {
+    @media (min-width: 740px) {
+        @content;
+    }
+}
+
+@mixin medium {
+    @media (min-width: 990px) {
+        @content;
+    }
+}
+
+@mixin large {
+    @media (min-width: 1260px) {
+        @content;
+    }
+}
+
+@mixin extra-large {
+    @media (min-width: 1800px) {
+        @content;
+    }
+}
+
+@mixin all {
+    @content;
+
+    @include small {
+        &-sm {
+            @content;
+        }
+    }
+
+    @include medium {
+        &-md {
+            @content;
+        }
+    }
+
+    @include large {
+        &-lg {
+            @content;
+        }
+    }
+
+    @include extra-large {
+        &-xl {
+            @content;
+        }
+    }
+}

package/src/scss/includes/_components.scss

@@ -0,0 +1,14 @@
+@use '../components/autocomplete';
+@use '../components/facets';
+@use '../components/icons';
+@use '../components/modified-query';
+@use '../components/page-size';
+@use '../components/pagination';
+@use '../components/query-suggestions';
+@use '../components/range-slider';
+@use '../components/search';
+@use '../components/search-results-item';
+@use '../components/selected-facets';
+@use '../components/sorting';
+@use '../components/tabs';
+@use '../components/tooltips';

package/src/scss/includes/_general.scss

@@ -0,0 +1,4 @@
+@use '../general/forms';
+@use '../general/grid-layout';
+@use '../general/images.scss';
+@use '../general/typography';

package/src/scss/includes/_reset.scss

@@ -0,0 +1,203 @@
+/***************
+    CSS Reset
+    http://meyerweb.com/eric/tools/css/reset/
+    v2.0 | 20110126
+    License: none (public domain)
+ ***************/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font-weight: normal;
+    font: inherit;
+    vertical-align: baseline;
+    color: inherit;
+    text-transform: none;
+    text-shadow: none;
+    background: transparent;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+    width: auto;
+
+    li {
+        list-style: none;
+    }
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+img {
+    display: inline-block;
+}
+
+/**************
+    Clearfix
+ **************/
+
+.clearfix,
+%clearfix {
+    &:after {
+        content: '';
+        display: table;
+        clear: both;
+    }
+}
+
+/**********
+    Base
+ **********/
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box !important;
+    transition: none;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+u {
+    text-decoration: underline;
+}
+
+sup {
+    vertical-align: super;
+    font-size: 75%;
+}
+
+sub {
+    vertical-align: sub;
+    font-size: 75%;
+}
+
+a {
+    cursor: pointer;
+}