ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

beautify css

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-29 17:45:59 +01:00
parent 1b3194d97d
commit fcefa53f81
10 changed files with 492 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/Web/WebMVC/wwwroot/css/app.css
View File

@ -1,61 +1,74 @@
@font-face { @font-face {
font-family: Montserrat; font-family: Montserrat;
font-weight: 400; 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"); } 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-face {
font-family: Montserrat; font-family: Montserrat;
font-weight: 700; 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"); } 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, html,
body { body {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
z-index: 10; } z-index: 10;
}
*, *,
*::after, *::after,
*::before { *::before {
box-sizing: border-box; } box-sizing: border-box;
}
.preloading { .preloading {
color: #00A69C; color: #00A69C;
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
left: 50%; left: 50%;
position: fixed; position: fixed;
top: 50%; top: 50%;
transform: translate(-50%, -50%); } transform: translate(-50%, -50%);
}
select::-ms-expand { select::-ms-expand {
display: none; } display: none;
}
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.form-input { .form-input {
max-width: 360px; max-width: 360px;
width: 360px; } } width: 360px;
}
}
.form-input { .form-input {
border-radius: 0; border-radius: 0;
height: 45px; height: 45px;
padding: 10px; } padding: 10px;
}
.form-input-small { .form-input-small {
max-width: 100px !important; } max-width: 100px !important;
}
.form-input-medium { .form-input-medium {
width: 150px !important; } width: 150px !important;
}
.alert { .alert {
padding-left: 0; } padding-left: 0;
}
.alert-danger { .alert-danger {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
color: #FB0D0D; color: #FB0D0D;
font-size: 12px; } font-size: 12px;
}
a, a,
a:active, a:active,
@ -66,8 +79,8 @@ a:visited {
transition: color 0.35s; transition: color 0.35s;
} }
a:hover, a:hover,
a:active { a:active {
color: #75B918; color: #75B918;
transition: color 0.35s; transition: color 0.35s;
} }

35
src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css
View File

@ -1,17 +1,21 @@
.esh-basketstatus { .esh-basketstatus {
cursor: pointer; cursor: pointer;
float: right; float: right;
position: relative; position: relative;
transition: all 0.35s; } transition: all 0.35s;
.esh-basketstatus.is-disabled {
opacity: .5;
pointer-events: none;
} }
.esh-basketstatus-image {
.esh-basketstatus.is-disabled {
opacity: .5;
pointer-events: none;
}
.esh-basketstatus-image {
height: 36px; height: 36px;
margin-top: .5rem; } margin-top: .5rem;
.esh-basketstatus-badge { }
.esh-basketstatus-badge {
background-color: #83D01B; background-color: #83D01B;
border-radius: 50%; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
@ -23,8 +27,11 @@
top: 0; top: 0;
transform: translateX(-38%); transform: translateX(-38%);
transition: all 0.35s; transition: all 0.35s;
width: 1.5rem; } width: 1.5rem;
.esh-basketstatus:hover .esh-basketstatus-badge { }
.esh-basketstatus:hover .esh-basketstatus-badge {
background-color: transparent; background-color: transparent;
color: #75b918; color: #75b918;
transition: all 0.35s; } transition: all 0.35s;
}

82
src/Web/WebMVC/wwwroot/css/basket/basket.component.css
View File

@ -1,34 +1,59 @@
.esh-basket { .esh-basket {
min-height: 80vh; } min-height: 80vh;
.esh-basket-titles { }
.esh-basket-titles {
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; } padding-top: 2rem;
.esh-basket-titles--clean { }
padding-bottom: 0;
padding-top: 0; } .esh-basket-titles--clean {
.esh-basket-title { padding-bottom: 0;
text-transform: uppercase; } padding-top: 0;
.esh-basket-items--border { }
.esh-basket-title {
text-transform: uppercase;
}
.esh-basket-items--border {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
padding: .5rem 0; } padding: .5rem 0;
}
.esh-basket-items--border:last-of-type { .esh-basket-items--border:last-of-type {
border-color: transparent; } border-color: transparent;
.esh-basket-item { }
.esh-basket-item {
font-size: 1rem; 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 { .esh-basket-item--middle {
line-height: 8rem; } line-height: 1rem;
@media screen and (max-width: 1024px) { }
.esh-basket-item--middle { }
line-height: 1rem; } }
.esh-basket-item--mark { .esh-basket-item--mark {
color: #00A69C; } color: #00A69C;
.esh-basket-image { }
height: 8rem; }
.esh-basket-input { .esh-basket-image {
height: 8rem;
}
.esh-basket-input {
line-height: 1rem; line-height: 1rem;
width: 100%; } width: 100%;
.esh-basket-checkout { }
.esh-basket-checkout {
border: none; border: none;
border-radius: 0; border-radius: 0;
background-color: #83D01B; background-color: #83D01B;
@ -40,7 +65,10 @@
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
transition: all 0.35s; } transition: all 0.35s;
}
.esh-basket-checkout:hover { .esh-basket-checkout:hover {
background-color: #4a760f; background-color: #4a760f;
transition: all 0.35s; } transition: all 0.35s;
}

202
src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css
View File

@ -1,111 +1,141 @@
.esh-catalog-hero { .esh-catalog-hero {
background-image: url("../../images/main_banner.png"); background-image: url("../../images/main_banner.png");
background-size: cover; background-size: cover;
height: 260px; height: 260px;
width: 100%; } width: 100%;
}
.esh-catalog-title { .esh-catalog-title {
position: relative; position: relative;
top: 74.28571px; } top: 74.28571px;
}
.esh-catalog-filters { .esh-catalog-filters {
background-color: #00A69C; background-color: #00A69C;
height: 65px; } height: 65px;
}
.esh-catalog-filter { .esh-catalog-filter {
background-color: transparent; background-color: transparent;
border-color: #00d9cc; border-color: #00d9cc;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
margin-right: 1rem; margin-right: 1rem;
margin-top: .5rem; margin-top: .5rem;
outline-color: #83D01B; outline-color: #83D01B;
padding-bottom: 0; padding-bottom: 0;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
padding-top: 1.5rem; padding-top: 1.5rem;
min-width: 140px; min-width: 140px;
-webkit-appearance: none; } -webkit-appearance: none;
.esh-catalog-filter option { }
background-color: #00A69C; }
.esh-catalog-filter option {
background-color: #00A69C;
}
.esh-catalog-label { .esh-catalog-label {
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 0; } z-index: 0;
.esh-catalog-label::before { }
color: rgba(255, 255, 255, 0.5);
content: attr(data-title); .esh-catalog-label::before {
font-size: 0.65rem; color: rgba(255, 255, 255, 0.5);
margin-top: 0.65rem; content: attr(data-title);
margin-left: 0.5rem; font-size: 0.65rem;
position: absolute; margin-top: 0.65rem;
text-transform: uppercase; margin-left: 0.5rem;
z-index: 1; } position: absolute;
.esh-catalog-label::after { text-transform: uppercase;
background-image: url("../../images/arrow-down.png"); z-index: 1;
height: 7px; }
content: '';
position: absolute; .esh-catalog-label::after {
right: 1.5rem; background-image: url("../../images/arrow-down.png");
top: 2.5rem; height: 7px;
width: 10px; content: '';
z-index: 1; } position: absolute;
right: 1.5rem;
top: 2.5rem;
width: 10px;
z-index: 1;
}
.esh-catalog-send { .esh-catalog-send {
background-color: #83D01B; background-color: #83D01B;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
transform: translateY(.5rem); transform: translateY(.5rem);
padding: 0.5rem; padding: 0.5rem;
transition: all 0.35s; } transition: all 0.35s;
.esh-catalog-send:hover { }
background-color: #4a760f;
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; text-align: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
width: 33%; } width: 33%;
@media screen and (max-width: 1024px) { }
@media screen and (max-width: 1024px) {
.esh-catalog-item { .esh-catalog-item {
width: 50%; } } width: 50%;
@media screen and (max-width: 768px) { }
}
@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; max-width: 370px;
width: 100%; } width: 100%;
}
.esh-catalog-button { .esh-catalog-button {
background-color: #83D01B; background-color: #83D01B;
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
height: 3rem; height: 3rem;
margin-top: 1rem; margin-top: 1rem;
transition: all 0.35s; transition: all 0.35s;
width: 80%; } width: 80%;
.esh-catalog-button:hover { }
background-color: #4a760f;
transition: all 0.35s; } .esh-catalog-button:hover {
background-color: #4a760f;
transition: all 0.35s;
}
.esh-catalog-name { .esh-catalog-name {
font-size: 1rem; font-size: 1rem;
font-weight: 300; font-weight: 300;
margin-top: .5rem; margin-top: .5rem;
text-align: center; text-align: center;
text-transform: uppercase; } text-transform: uppercase;
}
.esh-catalog-price { .esh-catalog-price {
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;
font-size: 28px; } font-size: 28px;
.esh-catalog-price::before { }
content: '$'; }
.esh-catalog-price::before {
content: '$';
}

68
src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css
View File

@ -1,28 +1,52 @@
.esh-orders_detail { .esh-orders_detail {
min-height: 80vh; } min-height: 80vh;
.esh-orders_detail-section { }
padding: 1rem 0; }
.esh-orders_detail-section--right { .esh-orders_detail-section {
text-align: right; } padding: 1rem 0;
.esh-orders_detail-titles { }
.esh-orders_detail-section--right {
text-align: right;
}
.esh-orders_detail-titles {
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; } padding-top: 2rem;
.esh-orders_detail-title { }
text-transform: uppercase; }
.esh-orders_detail-items--border { .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; } border-color: transparent;
.esh-orders_detail-item { }
.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; } line-height: 1rem;
@media screen and (max-width: 768px) { }
.esh-orders_detail-item--middle { }
line-height: 1rem; } }
.esh-orders_detail-item--mark { .esh-orders_detail-item--mark {
color: #83D01B; } color: #83D01B;
.esh-orders_detail-image { }
height: 8rem; }
.esh-orders_detail-image {
height: 8rem;
}

98
src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css
View File

@ -1,22 +1,34 @@
.esh-orders_new { .esh-orders_new {
min-height: 80vh; } min-height: 80vh;
.esh-orders_new-header { }
.esh-orders_new-header {
background-color: #00A69C; background-color: #00A69C;
height: 4rem; } height: 4rem;
.esh-orders_new-back { }
.esh-orders_new-back {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
line-height: 4rem; line-height: 4rem;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: color 0.35s; } transition: color 0.35s;
}
.esh-orders_new-back:hover { .esh-orders_new-back:hover {
color: #FFFFFF; color: #FFFFFF;
transition: color 0.35s; } transition: color 0.35s;
.esh-orders_new-section { }
padding: 1rem 0; }
.esh-orders_new-section--right { .esh-orders_new-section {
text-align: right; } padding: 1rem 0;
.esh-orders_new-placeOrder { }
.esh-orders_new-section--right {
text-align: right;
}
.esh-orders_new-placeOrder {
background-color: #83D01B; background-color: #83D01B;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -28,29 +40,51 @@
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
transition: all 0.35s; } transition: all 0.35s;
}
.esh-orders_new-placeOrder:hover { .esh-orders_new-placeOrder:hover {
background-color: #4a760f; background-color: #4a760f;
transition: all 0.35s; } transition: all 0.35s;
.esh-orders_new-titles { }
.esh-orders_new-titles {
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; } padding-top: 2rem;
.esh-orders_new-title { }
font-size: 1.25rem; }
.esh-orders_new-items--border { .esh-orders_new-title {
font-size: 1.25rem;
}
.esh-orders_new-items--border {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
padding: .5rem 0; } padding: .5rem 0;
}
.esh-orders_new-items--border:last-of-type { .esh-orders_new-items--border:last-of-type {
border-color: transparent; } border-color: transparent;
.esh-orders_new-item { }
.esh-orders_new-item {
font-size: 1rem; 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 { .esh-orders_new-item--middle {
line-height: 8rem; } line-height: 1rem;
@media screen and (max-width: 768px) { }
.esh-orders_new-item--middle { }
line-height: 1rem; } }
.esh-orders_new-item--mark { .esh-orders_new-item--mark {
color: #83D01B; } color: #83D01B;
.esh-orders_new-image { }
height: 8rem; }
.esh-orders_new-image {
height: 8rem;
}

93
src/Web/WebMVC/wwwroot/css/orders/orders.component.css
View File

@ -1,49 +1,74 @@
.esh-orders { .esh-orders {
min-height: 80vh; min-height: 80vh;
overflow-x: hidden; } overflow-x: hidden;
.esh-orders-header { }
.esh-orders-header {
background-color: #00A69C; background-color: #00A69C;
height: 4rem; } height: 4rem;
.esh-orders-back { }
.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; color: #FFFFFF;
transition: color 0.35s; } transition: color 0.35s;
.esh-orders-titles { }
.esh-orders-titles {
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; } padding-top: 2rem;
.esh-orders-title { }
text-transform: uppercase; }
.esh-orders-items { .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; background-color: #EEEEFF;
content: ''; content: '';
height: 100%; height: 100%;
left: 0; left: 0;
margin-left: -100vw; margin-left: -100vw;
position: absolute; position: absolute;
top: 0; top: 0;
width: 200vw; width: 200vw;
z-index: -1; } z-index: -1;
.esh-orders-item { }
font-weight: 300; }
.esh-orders-item--hover { .esh-orders-item {
opacity: 0; font-weight: 300;
pointer-events: none; } }
.esh-orders-items:hover .esh-orders-item--hover {
.esh-orders-item--hover {
opacity: 0;
pointer-events: none;
}
.esh-orders-items:hover .esh-orders-item--hover {
opacity: 1; opacity: 1;
pointer-events: all; } pointer-events: all;
.esh-orders-link { }
.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; color: #75b918;
transition: color 0.35s; } transition: color 0.35s;
}

17
src/Web/WebMVC/wwwroot/css/shared/components/header/header.css
View File

@ -1,12 +1,17 @@
.esh-header { .esh-header {
background-color: #00A69C; background-color: #00A69C;
height: 4rem; } height: 4rem;
.esh-header-back { }
.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; color: #FFFFFF !important;
transition: color 0.35s; } transition: color 0.35s;
}

64
src/Web/WebMVC/wwwroot/css/shared/components/identity/identity.css
View File

@ -1,20 +1,33 @@
.esh-identity { .esh-identity {
line-height: 3rem; line-height: 3rem;
position: relative; position: relative;
text-align: right; } text-align: right;
.esh-identity-section { }
.esh-identity-section {
display: inline-block; display: inline-block;
width: 100%; } width: 100%;
.esh-identity-name { }
display: inline-block; }
.esh-identity-name--upper { .esh-identity-name {
text-transform: uppercase; } display: inline-block;
@media screen and (max-width: 768px) { }
.esh-identity-name {
font-size: 0.85rem; } } .esh-identity-name--upper {
.esh-identity-image { text-transform: uppercase;
display: inline-block; } }
.esh-identity-drop {
@media screen and (max-width: 768px) {
.esh-identity-name {
font-size: 0.85rem;
}
}
.esh-identity-image {
display: inline-block;
}
.esh-identity-drop {
background: #FFFFFF; background: #FFFFFF;
height: 0; height: 0;
min-width: 14rem; min-width: 14rem;
@ -23,15 +36,22 @@
padding: .5rem; padding: .5rem;
position: absolute; position: absolute;
top: 2.5rem; top: 2.5rem;
transition: height 0.35s; } transition: height 0.35s;
.esh-identity:hover .esh-identity-drop { }
.esh-identity:hover .esh-identity-drop {
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
height: 7rem; height: 7rem;
transition: height 0.35s; } transition: height 0.35s;
.esh-identity-item { }
.esh-identity-item {
cursor: pointer; cursor: pointer;
display: block; display: block;
transition: color 0.35s; } transition: color 0.35s;
}
.esh-identity-item:hover { .esh-identity-item:hover {
color: #75b918; color: #75b918;
transition: color 0.35s; } transition: color 0.35s;
}

38
src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css
View File

@ -1,18 +1,32 @@
.esh-pager-wrapper { .esh-pager-wrapper {
padding-top: 1rem; padding-top: 1rem;
text-align: center; } text-align: center;
}
.esh-pager-item { .esh-pager-item {
margin: 0 5vw; } margin: 0 5vw;
.esh-pager-item--navigable { }
cursor: pointer; }
.esh-pager-item--navigable.is-disabled { .esh-pager-item--navigable {
display: none; } cursor: pointer;
}
.esh-pager-item--navigable.is-disabled {
display: none;
}
.esh-pager-item--navigable:hover { .esh-pager-item--navigable:hover {
color: #83D01B; } color: #83D01B;
@media screen and (max-width: 1280px) { }
@media screen and (max-width: 1280px) {
.esh-pager-item { .esh-pager-item {
font-size: 0.85rem; } } font-size: 0.85rem;
@media screen and (max-width: 1024px) { }
}
@media screen and (max-width: 1024px) {
.esh-pager-item { .esh-pager-item {
margin: 0 4vw; } } margin: 0 4vw;
}
}