@ -1,111 +1,141 @@ | |||||
.esh-catalog-hero { | .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 { | .esh-catalog-title { | ||||
position: relative; | |||||
top: 74.28571px; } | |||||
position: relative; | |||||
top: 74.28571px; | |||||
} | |||||
.esh-catalog-filters { | .esh-catalog-filters { | ||||
background-color: #00A69C; | |||||
height: 65px; } | |||||
background-color: #00A69C; | |||||
height: 65px; | |||||
} | |||||
.esh-catalog-filter { | .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 { | .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 { | .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 { | .esh-catalog-items { | ||||
margin-top: 1rem; } | |||||
margin-top: 1rem; | |||||
} | |||||
.esh-catalog-item { | .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 { | .esh-catalog-item { | ||||
width: 50%; } } | |||||
@media screen and (max-width: 768px) { | |||||
width: 50%; | |||||
} | |||||
} | |||||
@media screen and (max-width: 768px) { | |||||
.esh-catalog-item { | .esh-catalog-item { | ||||
width: 100%; } } | |||||
width: 100%; | |||||
} | |||||
} | |||||
.esh-catalog-thumbnail { | .esh-catalog-thumbnail { | ||||
max-width: 370px; | |||||
width: 100%; } | |||||
max-width: 370px; | |||||
width: 100%; | |||||
} | |||||
.esh-catalog-button { | .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 { | .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 { | .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: '$'; | |||||
} |
@ -1,28 +1,52 @@ | |||||
.esh-orders_detail { | .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-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; | border-bottom: 1px solid #EEEEEE; | ||||
padding: .5rem 0; } | |||||
padding: .5rem 0; | |||||
} | |||||
.esh-orders_detail-items--border:last-of-type { | .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-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 { | .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; | |||||
} |
@ -1,49 +1,74 @@ | |||||
.esh-orders { | .esh-orders { | ||||
min-height: 80vh; | |||||
overflow-x: hidden; } | |||||
.esh-orders-header { | |||||
min-height: 80vh; | |||||
overflow-x: hidden; | |||||
} | |||||
.esh-orders-header { | |||||
background-color: #00A69C; | background-color: #00A69C; | ||||
height: 4rem; } | |||||
.esh-orders-back { | |||||
height: 4rem; | |||||
} | |||||
.esh-orders-back { | |||||
color: rgba(255, 255, 255, 0.4); | color: rgba(255, 255, 255, 0.4); | ||||
line-height: 4rem; | line-height: 4rem; | ||||
text-transform: uppercase; | text-transform: uppercase; | ||||
text-decoration: none; | text-decoration: none; | ||||
transition: color 0.35s; } | |||||
transition: color 0.35s; | |||||
} | |||||
.esh-orders-back:hover { | .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-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; | height: 2rem; | ||||
line-height: 2rem; | line-height: 2rem; | ||||
position: relative; } | |||||
position: relative; | |||||
} | |||||
.esh-orders-items:nth-of-type(2n + 1):before { | .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; | opacity: 1; | ||||
pointer-events: all; } | |||||
.esh-orders-link { | |||||
pointer-events: all; | |||||
} | |||||
.esh-orders-link { | |||||
color: #83D01B; | color: #83D01B; | ||||
text-decoration: none; | text-decoration: none; | ||||
transition: color 0.35s; } | |||||
transition: color 0.35s; | |||||
} | |||||
.esh-orders-link:hover { | .esh-orders-link:hover { | ||||
color: #75b918; | |||||
transition: color 0.35s; } | |||||
color: #75b918; | |||||
transition: color 0.35s; | |||||
} |
@ -1,12 +1,17 @@ | |||||
.esh-header { | .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; | color: rgba(255, 255, 255, 0.5) !important; | ||||
line-height: 4rem; | line-height: 4rem; | ||||
text-transform: uppercase; | text-transform: uppercase; | ||||
text-decoration: none; | text-decoration: none; | ||||
transition: color 0.35s; } | |||||
transition: color 0.35s; | |||||
} | |||||
.esh-header-back:hover { | .esh-header-back:hover { | ||||
color: #FFFFFF !important; | |||||
transition: color 0.35s; } | |||||
color: #FFFFFF !important; | |||||
transition: color 0.35s; | |||||
} |
@ -1,18 +1,32 @@ | |||||
.esh-pager-wrapper { | .esh-pager-wrapper { | ||||
padding-top: 1rem; | |||||
text-align: center; } | |||||
padding-top: 1rem; | |||||
text-align: center; | |||||
} | |||||
.esh-pager-item { | .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 { | .esh-pager-item--navigable:hover { | ||||
color: #83D01B; } | |||||
@media screen and (max-width: 1280px) { | |||||
color: #83D01B; | |||||
} | |||||
@media screen and (max-width: 1280px) { | |||||
.esh-pager-item { | .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 { | .esh-pager-item { | ||||
margin: 0 4vw; } } | |||||
margin: 0 4vw; | |||||
} | |||||
} |