diff --git a/wherehows-web/app/serializers/application.js b/wherehows-web/app/serializers/application.js new file mode 100644 index 0000000000..9e453779ce --- /dev/null +++ b/wherehows-web/app/serializers/application.js @@ -0,0 +1,6 @@ +import DS from 'ember-data'; +import DataTableSerializerMixin from 'ember-data-table/mixins/serializer'; + +export default DS.JSONAPISerializer.extend(DataTableSerializerMixin, { + +}); diff --git a/wherehows-web/app/styles/components/_nacho-button.scss b/wherehows-web/app/styles/components/_nacho-button.scss new file mode 100644 index 0000000000..637a598dd2 --- /dev/null +++ b/wherehows-web/app/styles/components/_nacho-button.scss @@ -0,0 +1,93 @@ +@import "restyle"; + +@include restyle-define(button, ( + // Button Component Variables + restyle-var(height): 32px, + restyle-var(horizontal-padding): 16px, + restyle-var(main-color): $secondary-color, + restyle-var(background-color): $secondary-color, + restyle-var(font-size): 1.7rem, + restyle-var(font-weight): 600, + restyle-var(text-color): $text-color, + restyle-var(border-radius): 2px, + background-color: restyle-var(background-color), + border: 0, + border-radius: restyle-var(border-radius), + box-sizing: border-box, + color: restyle-var(text-color), + cursor: pointer, + display: inline-block, + font-size: restyle-var(font-size), + font-weight: restyle-var(font-weight), + font-family: inherit, + height: restyle-var(height), + line-height: restyle-var(height), + overflow: hidden, + outline: 0, + padding: 0 restyle-var(horizontal-padding), + position: relative, + text-align: center, + text-decoration: none, + vertical-align: middle, + z-index: z(default), + restyle-modifiers: ( + small: ( + restyle-var(font-size): 1.5rem, + restyle-var(height): 24px, + restyle-var(horizontal-padding): 16px, + ), + medium: ( + // Default + ), + large: ( + restyle-var(font-size): 1.7rem, + restyle-var(height): 40px, + restyle-var(horizontal-padding): 24px + ), + x-large: ( + restyle-var(font-size): 2.1rem, + restyle-var(height): 48px, + restyle-var(horizontal-padding): 32px, + restyle-var(font-weight): normal + ), + tertiary: ( + restyle-var(main-color): transparent + ), + secondary: ( + restyle-var(background-color): transparent, + restyle-var(text-color): $text-invert-color, + restyle-var(box-shadow-size): inset 0 0 0 1px, + restyle-var(box-shadow-size-hover): inset 0 0 0 2px, + restyle-var(box-shadow-size-active): inset 0 0 0 3px, + restyle-var(font-weight): 300, + box-shadow: ( + restyle-var(box-shadow-size) restyle-var(main-color), + restyle-var(box-shadow-size-hover) transparent, + restyle-var(box-shadow-size-active) transparent + ) + ) + ) +)); + +.nacho-button { + @include restyle(button); + + &--x-large { + @include restyle(x-large button); + } + + &--large { + @include restyle(large button); + } + + &--small { + @include restyle(small button); + } + + &--secondary { + @include restyle(secondary button); + } + &--tertiary { + @include restyle(tertiary button); + } +} \ No newline at end of file diff --git a/wherehows-web/app/styles/components/_nacho-filter-rail.scss b/wherehows-web/app/styles/components/_nacho-filter-rail.scss new file mode 100644 index 0000000000..19bb5c5802 --- /dev/null +++ b/wherehows-web/app/styles/components/_nacho-filter-rail.scss @@ -0,0 +1,92 @@ +@import "restyle"; + +$pad-width: 16px; + +@include restyle-define(filter-card, ( + restyle-var(horizontal-padding): $pad-width, + background-color: set-color(white, base), + padding: restyle-var(horizontal-padding), + position: relative, + border-bottom: 1px solid set-color(grey, light) +)); + +@include restyle-define(filter-rail, ( + list-style-type: none, + padding: 0, + border: 1px solid set-color(grey, light) +)); + +.nacho-filter-rail { + @include restyle(filter-rail); + // Temporary rule to counteract margin on bs `.pager` class in search results + // page view + margin: 20px 0; + + &__header { + color: set-color(blue, oxford); + background-color: set-color(white, base); + padding: $pad-width; + font-size: 17px; + font-weight: 600; + } +} + +.nacho-filter-card { + @include restyle(filter-card); + + &:last-child { + border-bottom: none; + } + + &__label, .ember-radio-button { + display: block; + } + + &__header { + padding: 0 0 $pad-width/2; + } +} + +// TODO: DSS-6628 ember-radio-button component does not currently support styles +// on