diff --git a/src/Web/WebMVC/wwwroot/css/app.css b/src/Web/WebMVC/wwwroot/css/app.css index 3c0ba597f..8378a898a 100644 --- a/src/Web/WebMVC/wwwroot/css/app.css +++ b/src/Web/WebMVC/wwwroot/css/app.css @@ -1,61 +1,74 @@ @font-face { - font-family: Montserrat; - font-weight: 400; - src: url("./fonts/Montserrat-Regular.eot?") format("eot"), url("./fonts/Montserrat-Regular.woff") format("woff"), url("./fonts/Montserrat-Regular.ttf") format("truetype"), url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg"); } + font-family: Montserrat; + font-weight: 400; + src: url("./fonts/Montserrat-Regular.eot?") format("eot"), url("./fonts/Montserrat-Regular.woff") format("woff"), url("./fonts/Montserrat-Regular.ttf") format("truetype"), url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg"); +} @font-face { - font-family: Montserrat; - font-weight: 700; - src: url("./fonts/Montserrat-Bold.eot?") format("eot"), url("./fonts/Montserrat-Bold.woff") format("woff"), url("./fonts/Montserrat-Bold.ttf") format("truetype"), url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg"); } + font-family: Montserrat; + font-weight: 700; + src: url("./fonts/Montserrat-Bold.eot?") format("eot"), url("./fonts/Montserrat-Bold.woff") format("woff"), url("./fonts/Montserrat-Bold.ttf") format("truetype"), url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg"); +} html, body { - font-family: Montserrat, sans-serif; - font-size: 16px; - font-weight: 400; - z-index: 10; } + font-family: Montserrat, sans-serif; + font-size: 16px; + font-weight: 400; + z-index: 10; +} *, *::after, *::before { - box-sizing: border-box; } + box-sizing: border-box; +} .preloading { - color: #00A69C; - display: block; - font-size: 1.5rem; - left: 50%; - position: fixed; - top: 50%; - transform: translate(-50%, -50%); } + color: #00A69C; + display: block; + font-size: 1.5rem; + left: 50%; + position: fixed; + top: 50%; + transform: translate(-50%, -50%); +} select::-ms-expand { - display: none; } + display: none; +} @media screen and (min-width: 992px) { - .form-input { - max-width: 360px; - width: 360px; } } + .form-input { + max-width: 360px; + width: 360px; + } +} .form-input { - border-radius: 0; - height: 45px; - padding: 10px; } + border-radius: 0; + height: 45px; + padding: 10px; +} .form-input-small { - max-width: 100px !important; } + max-width: 100px !important; +} .form-input-medium { - width: 150px !important; } + width: 150px !important; +} .alert { - padding-left: 0; } + padding-left: 0; +} .alert-danger { - background-color: transparent; - border: 0; - color: #FB0D0D; - font-size: 12px; } + background-color: transparent; + border: 0; + color: #FB0D0D; + font-size: 12px; +} a, a:active, @@ -66,8 +79,8 @@ a:visited { transition: color 0.35s; } -a:hover, -a:active { - color: #75B918; - transition: color 0.35s; -} \ No newline at end of file + a:hover, + a:active { + color: #75B918; + transition: color 0.35s; + } diff --git a/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css b/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css index 3f7ed6c8f..98e9ea7de 100644 --- a/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css +++ b/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css @@ -1,17 +1,21 @@ .esh-basketstatus { - cursor: pointer; - float: right; - position: relative; - transition: all 0.35s; } - -.esh-basketstatus.is-disabled { - opacity: .5; - pointer-events: none; + cursor: pointer; + float: right; + position: relative; + transition: all 0.35s; } - .esh-basketstatus-image { + + .esh-basketstatus.is-disabled { + opacity: .5; + pointer-events: none; + } + +.esh-basketstatus-image { height: 36px; - margin-top: .5rem; } - .esh-basketstatus-badge { + margin-top: .5rem; +} + +.esh-basketstatus-badge { background-color: #83D01B; border-radius: 50%; color: #FFFFFF; @@ -23,8 +27,11 @@ top: 0; transform: translateX(-38%); transition: all 0.35s; - width: 1.5rem; } - .esh-basketstatus:hover .esh-basketstatus-badge { + width: 1.5rem; +} + +.esh-basketstatus:hover .esh-basketstatus-badge { background-color: transparent; color: #75b918; - transition: all 0.35s; } + transition: all 0.35s; +} diff --git a/src/Web/WebMVC/wwwroot/css/basket/basket.component.css b/src/Web/WebMVC/wwwroot/css/basket/basket.component.css index ecc8e2fc4..fa3a8ad0e 100644 --- a/src/Web/WebMVC/wwwroot/css/basket/basket.component.css +++ b/src/Web/WebMVC/wwwroot/css/basket/basket.component.css @@ -1,34 +1,59 @@ .esh-basket { - min-height: 80vh; } - .esh-basket-titles { + min-height: 80vh; +} + +.esh-basket-titles { padding-bottom: 1rem; - padding-top: 2rem; } - .esh-basket-titles--clean { - padding-bottom: 0; - padding-top: 0; } - .esh-basket-title { - text-transform: uppercase; } - .esh-basket-items--border { + padding-top: 2rem; +} + +.esh-basket-titles--clean { + padding-bottom: 0; + padding-top: 0; +} + +.esh-basket-title { + text-transform: uppercase; +} + +.esh-basket-items--border { border-bottom: 1px solid #EEEEEE; - padding: .5rem 0; } + padding: .5rem 0; +} + .esh-basket-items--border:last-of-type { - border-color: transparent; } - .esh-basket-item { + border-color: transparent; + } + +.esh-basket-item { font-size: 1rem; - font-weight: 300; } + font-weight: 300; +} + +.esh-basket-item--middle { + line-height: 8rem; +} + +@media screen and (max-width: 1024px) { .esh-basket-item--middle { - line-height: 8rem; } - @media screen and (max-width: 1024px) { - .esh-basket-item--middle { - line-height: 1rem; } } - .esh-basket-item--mark { - color: #00A69C; } - .esh-basket-image { - height: 8rem; } - .esh-basket-input { + line-height: 1rem; + } +} + +.esh-basket-item--mark { + color: #00A69C; +} + +.esh-basket-image { + height: 8rem; +} + +.esh-basket-input { line-height: 1rem; - width: 100%; } - .esh-basket-checkout { + width: 100%; +} + +.esh-basket-checkout { border: none; border-radius: 0; background-color: #83D01B; @@ -40,7 +65,10 @@ padding: 1rem 1.5rem; text-align: center; text-transform: uppercase; - transition: all 0.35s; } + transition: all 0.35s; +} + .esh-basket-checkout:hover { - background-color: #4a760f; - transition: all 0.35s; } + background-color: #4a760f; + transition: all 0.35s; + } diff --git a/src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css b/src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css index 746924d99..9a84259fc 100644 --- a/src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css +++ b/src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css @@ -1,111 +1,141 @@ .esh-catalog-hero { - background-image: url("../../images/main_banner.png"); - background-size: cover; - height: 260px; - width: 100%; } + background-image: url("../../images/main_banner.png"); + background-size: cover; + height: 260px; + width: 100%; +} .esh-catalog-title { - position: relative; - top: 74.28571px; } + position: relative; + top: 74.28571px; +} .esh-catalog-filters { - background-color: #00A69C; - height: 65px; } + background-color: #00A69C; + height: 65px; +} .esh-catalog-filter { - background-color: transparent; - border-color: #00d9cc; - color: #FFFFFF; - cursor: pointer; - margin-right: 1rem; - margin-top: .5rem; - outline-color: #83D01B; - padding-bottom: 0; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 1.5rem; - min-width: 140px; - -webkit-appearance: none; } - .esh-catalog-filter option { - background-color: #00A69C; } + background-color: transparent; + border-color: #00d9cc; + color: #FFFFFF; + cursor: pointer; + margin-right: 1rem; + margin-top: .5rem; + outline-color: #83D01B; + padding-bottom: 0; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 1.5rem; + min-width: 140px; + -webkit-appearance: none; +} + + .esh-catalog-filter option { + background-color: #00A69C; + } .esh-catalog-label { - display: inline-block; - position: relative; - z-index: 0; } - .esh-catalog-label::before { - color: rgba(255, 255, 255, 0.5); - content: attr(data-title); - font-size: 0.65rem; - margin-top: 0.65rem; - margin-left: 0.5rem; - position: absolute; - text-transform: uppercase; - z-index: 1; } - .esh-catalog-label::after { - background-image: url("../../images/arrow-down.png"); - height: 7px; - content: ''; - position: absolute; - right: 1.5rem; - top: 2.5rem; - width: 10px; - z-index: 1; } + display: inline-block; + position: relative; + z-index: 0; +} + + .esh-catalog-label::before { + color: rgba(255, 255, 255, 0.5); + content: attr(data-title); + font-size: 0.65rem; + margin-top: 0.65rem; + margin-left: 0.5rem; + position: absolute; + text-transform: uppercase; + z-index: 1; + } + + .esh-catalog-label::after { + background-image: url("../../images/arrow-down.png"); + height: 7px; + content: ''; + position: absolute; + right: 1.5rem; + top: 2.5rem; + width: 10px; + z-index: 1; + } .esh-catalog-send { - background-color: #83D01B; - color: #FFFFFF; - cursor: pointer; - font-size: 1rem; - transform: translateY(.5rem); - padding: 0.5rem; - transition: all 0.35s; } - .esh-catalog-send:hover { - background-color: #4a760f; - transition: all 0.35s; } + background-color: #83D01B; + color: #FFFFFF; + cursor: pointer; + font-size: 1rem; + transform: translateY(.5rem); + padding: 0.5rem; + transition: all 0.35s; +} + + .esh-catalog-send:hover { + background-color: #4a760f; + transition: all 0.35s; + } .esh-catalog-items { - margin-top: 1rem; } + margin-top: 1rem; +} .esh-catalog-item { - text-align: center; - margin-bottom: 1.5rem; - width: 33%; } - @media screen and (max-width: 1024px) { + text-align: center; + margin-bottom: 1.5rem; + width: 33%; +} + +@media screen and (max-width: 1024px) { .esh-catalog-item { - width: 50%; } } - @media screen and (max-width: 768px) { + width: 50%; + } +} + +@media screen and (max-width: 768px) { .esh-catalog-item { - width: 100%; } } + width: 100%; + } +} .esh-catalog-thumbnail { - max-width: 370px; - width: 100%; } + max-width: 370px; + width: 100%; +} .esh-catalog-button { - background-color: #83D01B; - border: none; - color: #FFFFFF; - cursor: pointer; - font-size: 1rem; - height: 3rem; - margin-top: 1rem; - transition: all 0.35s; - width: 80%; } - .esh-catalog-button:hover { - background-color: #4a760f; - transition: all 0.35s; } + background-color: #83D01B; + border: none; + color: #FFFFFF; + cursor: pointer; + font-size: 1rem; + height: 3rem; + margin-top: 1rem; + transition: all 0.35s; + width: 80%; +} + + .esh-catalog-button:hover { + background-color: #4a760f; + transition: all 0.35s; + } .esh-catalog-name { - font-size: 1rem; - font-weight: 300; - margin-top: .5rem; - text-align: center; - text-transform: uppercase; } + font-size: 1rem; + font-weight: 300; + margin-top: .5rem; + text-align: center; + text-transform: uppercase; +} .esh-catalog-price { - text-align: center; - font-weight: 900; - font-size: 28px; } - .esh-catalog-price::before { - content: '$'; } + text-align: center; + font-weight: 900; + font-size: 28px; +} + + .esh-catalog-price::before { + content: '$'; + } diff --git a/src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css b/src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css index f40ca4334..ffbfdb77f 100644 --- a/src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css +++ b/src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css @@ -1,28 +1,52 @@ .esh-orders_detail { - min-height: 80vh; } - .esh-orders_detail-section { - padding: 1rem 0; } - .esh-orders_detail-section--right { - text-align: right; } - .esh-orders_detail-titles { + min-height: 80vh; +} + +.esh-orders_detail-section { + padding: 1rem 0; +} + +.esh-orders_detail-section--right { + text-align: right; +} + +.esh-orders_detail-titles { padding-bottom: 1rem; - padding-top: 2rem; } - .esh-orders_detail-title { - text-transform: uppercase; } - .esh-orders_detail-items--border { + padding-top: 2rem; +} + +.esh-orders_detail-title { + text-transform: uppercase; +} + +.esh-orders_detail-items--border { border-bottom: 1px solid #EEEEEE; - padding: .5rem 0; } + padding: .5rem 0; +} + .esh-orders_detail-items--border:last-of-type { - border-color: transparent; } - .esh-orders_detail-item { + border-color: transparent; + } + +.esh-orders_detail-item { font-size: 1rem; - font-weight: 300; } + font-weight: 300; +} + +.esh-orders_detail-item--middle { + line-height: 8rem; +} + +@media screen and (max-width: 768px) { .esh-orders_detail-item--middle { - line-height: 8rem; } - @media screen and (max-width: 768px) { - .esh-orders_detail-item--middle { - line-height: 1rem; } } - .esh-orders_detail-item--mark { - color: #83D01B; } - .esh-orders_detail-image { - height: 8rem; } + line-height: 1rem; + } +} + +.esh-orders_detail-item--mark { + color: #83D01B; +} + +.esh-orders_detail-image { + height: 8rem; +} diff --git a/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css b/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css index ce7c84e04..a2210fc8b 100644 --- a/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css +++ b/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css @@ -1,22 +1,34 @@ .esh-orders_new { - min-height: 80vh; } - .esh-orders_new-header { + min-height: 80vh; +} + +.esh-orders_new-header { background-color: #00A69C; - height: 4rem; } - .esh-orders_new-back { + height: 4rem; +} + +.esh-orders_new-back { color: rgba(255, 255, 255, 0.4); line-height: 4rem; text-decoration: none; text-transform: uppercase; - transition: color 0.35s; } + transition: color 0.35s; +} + .esh-orders_new-back:hover { - color: #FFFFFF; - transition: color 0.35s; } - .esh-orders_new-section { - padding: 1rem 0; } - .esh-orders_new-section--right { - text-align: right; } - .esh-orders_new-placeOrder { + color: #FFFFFF; + transition: color 0.35s; + } + +.esh-orders_new-section { + padding: 1rem 0; +} + +.esh-orders_new-section--right { + text-align: right; +} + +.esh-orders_new-placeOrder { background-color: #83D01B; border: 0; border-radius: 0; @@ -28,29 +40,51 @@ padding: 1rem 1.5rem; text-align: center; text-transform: uppercase; - transition: all 0.35s; } + transition: all 0.35s; +} + .esh-orders_new-placeOrder:hover { - background-color: #4a760f; - transition: all 0.35s; } - .esh-orders_new-titles { + background-color: #4a760f; + transition: all 0.35s; + } + +.esh-orders_new-titles { padding-bottom: 1rem; - padding-top: 2rem; } - .esh-orders_new-title { - font-size: 1.25rem; } - .esh-orders_new-items--border { + padding-top: 2rem; +} + +.esh-orders_new-title { + font-size: 1.25rem; +} + +.esh-orders_new-items--border { border-bottom: 1px solid #EEEEEE; - padding: .5rem 0; } + padding: .5rem 0; +} + .esh-orders_new-items--border:last-of-type { - border-color: transparent; } - .esh-orders_new-item { + border-color: transparent; + } + +.esh-orders_new-item { font-size: 1rem; - font-weight: 300; } + font-weight: 300; +} + +.esh-orders_new-item--middle { + line-height: 8rem; +} + +@media screen and (max-width: 768px) { .esh-orders_new-item--middle { - line-height: 8rem; } - @media screen and (max-width: 768px) { - .esh-orders_new-item--middle { - line-height: 1rem; } } - .esh-orders_new-item--mark { - color: #83D01B; } - .esh-orders_new-image { - height: 8rem; } + line-height: 1rem; + } +} + +.esh-orders_new-item--mark { + color: #83D01B; +} + +.esh-orders_new-image { + height: 8rem; +} diff --git a/src/Web/WebMVC/wwwroot/css/orders/orders.component.css b/src/Web/WebMVC/wwwroot/css/orders/orders.component.css index 457185efe..de00c0f15 100644 --- a/src/Web/WebMVC/wwwroot/css/orders/orders.component.css +++ b/src/Web/WebMVC/wwwroot/css/orders/orders.component.css @@ -1,49 +1,74 @@ .esh-orders { - min-height: 80vh; - overflow-x: hidden; } - .esh-orders-header { + min-height: 80vh; + overflow-x: hidden; +} + +.esh-orders-header { background-color: #00A69C; - height: 4rem; } - .esh-orders-back { + height: 4rem; +} + +.esh-orders-back { color: rgba(255, 255, 255, 0.4); line-height: 4rem; text-transform: uppercase; text-decoration: none; - transition: color 0.35s; } + transition: color 0.35s; +} + .esh-orders-back:hover { - color: #FFFFFF; - transition: color 0.35s; } - .esh-orders-titles { + color: #FFFFFF; + transition: color 0.35s; + } + +.esh-orders-titles { padding-bottom: 1rem; - padding-top: 2rem; } - .esh-orders-title { - text-transform: uppercase; } - .esh-orders-items { + padding-top: 2rem; +} + +.esh-orders-title { + text-transform: uppercase; +} + +.esh-orders-items { height: 2rem; line-height: 2rem; - position: relative; } + position: relative; +} + .esh-orders-items:nth-of-type(2n + 1):before { - background-color: #EEEEFF; - content: ''; - height: 100%; - left: 0; - margin-left: -100vw; - position: absolute; - top: 0; - width: 200vw; - z-index: -1; } - .esh-orders-item { - font-weight: 300; } - .esh-orders-item--hover { - opacity: 0; - pointer-events: none; } - .esh-orders-items:hover .esh-orders-item--hover { + background-color: #EEEEFF; + content: ''; + height: 100%; + left: 0; + margin-left: -100vw; + position: absolute; + top: 0; + width: 200vw; + z-index: -1; + } + +.esh-orders-item { + font-weight: 300; +} + +.esh-orders-item--hover { + opacity: 0; + pointer-events: none; +} + +.esh-orders-items:hover .esh-orders-item--hover { opacity: 1; - pointer-events: all; } - .esh-orders-link { + pointer-events: all; +} + +.esh-orders-link { color: #83D01B; text-decoration: none; - transition: color 0.35s; } + transition: color 0.35s; +} + .esh-orders-link:hover { - color: #75b918; - transition: color 0.35s; } + color: #75b918; + transition: color 0.35s; + } diff --git a/src/Web/WebMVC/wwwroot/css/shared/components/header/header.css b/src/Web/WebMVC/wwwroot/css/shared/components/header/header.css index dab2c96c9..89fd203bd 100644 --- a/src/Web/WebMVC/wwwroot/css/shared/components/header/header.css +++ b/src/Web/WebMVC/wwwroot/css/shared/components/header/header.css @@ -1,12 +1,17 @@ .esh-header { - background-color: #00A69C; - height: 4rem; } - .esh-header-back { + background-color: #00A69C; + height: 4rem; +} + +.esh-header-back { color: rgba(255, 255, 255, 0.5) !important; line-height: 4rem; text-transform: uppercase; text-decoration: none; - transition: color 0.35s; } + transition: color 0.35s; +} + .esh-header-back:hover { - color: #FFFFFF !important; - transition: color 0.35s; } + color: #FFFFFF !important; + transition: color 0.35s; + } diff --git a/src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css b/src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css index 2f998fe00..586d34d0a 100644 --- a/src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css +++ b/src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css @@ -1,20 +1,33 @@ .esh-identity { - line-height: 3rem; - position: relative; - text-align: right; } - .esh-identity-section { + line-height: 3rem; + position: relative; + text-align: right; +} + +.esh-identity-section { display: inline-block; - width: 100%; } - .esh-identity-name { - display: inline-block; } - .esh-identity-name--upper { - text-transform: uppercase; } - @media screen and (max-width: 768px) { - .esh-identity-name { - font-size: 0.85rem; } } - .esh-identity-image { - display: inline-block; } - .esh-identity-drop { + width: 100%; +} + +.esh-identity-name { + display: inline-block; +} + +.esh-identity-name--upper { + text-transform: uppercase; +} + +@media screen and (max-width: 768px) { + .esh-identity-name { + font-size: 0.85rem; + } +} + +.esh-identity-image { + display: inline-block; +} + +.esh-identity-drop { background: #FFFFFF; height: 0; min-width: 14rem; @@ -23,15 +36,22 @@ padding: .5rem; position: absolute; top: 2.5rem; - transition: height 0.35s; } - .esh-identity:hover .esh-identity-drop { + transition: height 0.35s; +} + +.esh-identity:hover .esh-identity-drop { border: 1px solid #EEEEEE; height: 7rem; - transition: height 0.35s; } - .esh-identity-item { + transition: height 0.35s; +} + +.esh-identity-item { cursor: pointer; display: block; - transition: color 0.35s; } + transition: color 0.35s; +} + .esh-identity-item:hover { - color: #75b918; - transition: color 0.35s; } + color: #75b918; + transition: color 0.35s; + } diff --git a/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css b/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css index 29e6e870a..e6b19cdd4 100644 --- a/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css +++ b/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css @@ -1,18 +1,32 @@ .esh-pager-wrapper { - padding-top: 1rem; - text-align: center; } + padding-top: 1rem; + text-align: center; +} .esh-pager-item { - margin: 0 5vw; } - .esh-pager-item--navigable { - cursor: pointer; } - .esh-pager-item--navigable.is-disabled { - display: none; } + margin: 0 5vw; +} + +.esh-pager-item--navigable { + cursor: pointer; +} + + .esh-pager-item--navigable.is-disabled { + display: none; + } + .esh-pager-item--navigable:hover { - color: #83D01B; } - @media screen and (max-width: 1280px) { + color: #83D01B; + } + +@media screen and (max-width: 1280px) { .esh-pager-item { - font-size: 0.85rem; } } - @media screen and (max-width: 1024px) { + font-size: 0.85rem; + } +} + +@media screen and (max-width: 1024px) { .esh-pager-item { - margin: 0 4vw; } } + margin: 0 4vw; + } +}