+
+
+
+
+
+
+
+
+
+
+
+
{{item.name}}
-
-
-
\ No newline at end of file
+
+
+
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss
index 54e0d5462..0b6be9bd2 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss
@@ -1,125 +1,148 @@
-@import '../_variables.scss';
+@import '../variables';
-select::-ms-expand {
- display: none;
-}
+.esh-catalog {
-.catalog {
- &-banner {
- height: 258px;
- vertical-align: middle;
+ $banner-height: 260px;
- &-image {
- width: 100%;
- position: absolute;
- left: 0;
- height: 258px;
- }
+ &-hero {
+ background-image: url('../../images/main_banner.png');
+ background-size: cover;
+ height: $banner-height;
+ width: 100%;
+ }
- &-text {
- position: relative;
- top: 75px;
- }
+ &-title {
+ position: relative;
+ top: $banner-height / 3.5;
+ }
+
+ $filter-height: 65px;
+
+ &-filters {
+ background-color: $color-brand;
+ height: $filter-height;
}
+ $filter-padding: .5rem;
+
&-filter {
- height: 65px;
+ background-color: transparent;
+ border-color: $color-brand-bright;
+ color: $color-foreground-brighter;
+ cursor: pointer;
+ margin-right: 1rem;
+ margin-top: .5rem;
+ outline-color: $color-secondary;
+ padding-bottom: 0;
+ padding-left: $filter-padding;
+ padding-right: $filter-padding;
+ padding-top: $filter-padding * 3;
+ min-width: 140px;
+ -webkit-appearance: none;
+
+ option {
+ background-color: $color-brand;
+ }
+ }
- &-container {
+ &-label {
+ display: inline-block;
+ position: relative;
+ z-index: 0;
+
+ &::before {
+ color: rgba($color-foreground-brighter, .5);
+ content: attr(data-title);
+ font-size: $font-size-xs;
+ margin-top: $font-size-xs;
+ margin-left: $filter-padding;
position: absolute;
- width: 100%;
- background-color: $color-brand;
- left: 0;
- height: 65px;
+ text-transform: uppercase;
+ z-index: 1;
}
- &-button {
- width: 45px;
- height: 45px;
- padding: 6px 20px 10px 8px;
- background-color: $color-secondary;
- color: white;
- font-size: 16px;
- margin: 10px 0;
- border: none;
+ &::after {
+ background-image: url('../../images/arrow-down.png');
+ height: 7px; //png height
+ content: '';
position: absolute;
+ right: $filter-padding * 3;
+ top: $filter-padding * 5;
+ width: 10px; //png width
+ z-index: 1;
}
+ }
- &-select {
- background-color: transparent;
- padding: 10px;
- margin: 10px;
- margin-right: 20px;
- color: #fff;
- padding-top: 20px;
- padding-bottom: 3px;
- min-width: 140px;
- border-color: #37c7ca;
- max-height: 43px;
- -webkit-appearance: none;
-
- & option {
- background-color: #00a69c;
- }
+ &-send {
+ background-color: $color-secondary;
+ color: $color-foreground-brighter;
+ cursor: pointer;
+ font-size: $font-size-m;
+ margin-top: -$filter-padding * 3;
+ padding: $filter-padding;
+ transition: all $animation-speed-default;
+
+ &:hover {
+ background-color: $color-secondary-darker;
+ transition: all $animation-speed-default;
}
+ }
+
+ &-items {
+ margin-top: 1rem;
+ }
+
+ &-item {
+ text-align: center;
+ margin-bottom: 1.5rem;
+ width: 33%;
- &-wrapper {
- z-index: 0;
- display: inline-block;
- margin-left: -10px;
+ @media screen and (max-width: $media-screen-m) {
+ width: 50%;
}
- &-wrapper::before {
- content: attr(data-name);
- opacity: 0.5;
- z-index: 1;
- text-transform: uppercase;
- position: absolute;
- font-size: 10px;
- margin-top: 15px;
- margin-left: 21px;
- color: white;
+ @media screen and (max-width: $media-screen-s) {
+ width: 100%;
}
}
- &-content {
- margin-top: 10px;
-
- &-item {
- text-align: center;
- margin-bottom: 20px;
-
- &-image {
- }
-
- &-button {
- width: 255px;
- height: 45px;
- padding: 10px 20px 10px 20px;
- background-color: $color-secondary;
- color: white;
- font-size: 16px;
- margin: 10px 0;
- border: none;
- cursor: pointer;
- }
-
- &-title {
- text-align: center;
- text-transform: uppercase;
- font-weight: 300;
- font-size: 16px;
- }
-
- &-price {
- text-align: center;
- font-weight: 900;
- font-size: 28px;
- }
-
- &-price::before {
- content: '$';
- }
+ &-thumbnail {
+ max-width: 370px;
+ width: 100%;
+ }
+
+ &-button {
+ background-color: $color-secondary;
+ border: none;
+ color: $color-foreground-brighter;
+ cursor: pointer;
+ font-size: $font-size-m;
+ height: 3rem;
+ margin-top: 1rem;
+ transition: all $animation-speed-default;
+ width: 80%;
+
+ &:hover {
+ background-color: $color-secondary-darker;
+ transition: all $animation-speed-default;
+ }
+ }
+
+ &-name {
+ font-size: $font-size-m;
+ font-weight: $font-weight-semilight;
+ margin-top: .5rem;
+ text-align: center;
+ text-transform: uppercase;
+ }
+
+ &-price {
+ text-align: center;
+ font-weight: 900;
+ font-size: 28px;
+
+ &::before {
+ content: '$';
}
}
}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts
index 0eaf5fd5a..4aba2c433 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts
@@ -8,7 +8,7 @@ import { IPager } from '../shared/models/pager.model';
import { BasketWrapperService} from '../shared/services/basket.wrapper.service';
@Component({
- selector: 'esh-catalog .catalog',
+ selector: 'esh-catalog .esh-catalog',
styleUrls: ['./catalog.component.scss'],
templateUrl: './catalog.component.html'
})
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html
index ce352ef08..1b0a77c94 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html
@@ -1,31 +1,25 @@
-
+
+ 
- 
- 