@ -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: '$'; | |||
} |
@ -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; | |||
} |
@ -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; | |||
} |
@ -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; | |||
} |
@ -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; | |||
} | |||
} |