Skip to content

Commit f1a662e

Browse files
author
Quique Fernandez
committed
Upate all CSS on MVW website
1 parent f453d11 commit f1a662e

14 files changed

Lines changed: 433 additions & 874 deletions

File tree

‎src/Web/WebMVC/wwwroot/css/app.component.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.esh-app-footer {
2+
background-color: #000000;
3+
border-top: 1px solid #EEEEEE;
4+
margin-top: 2.5rem;
5+
padding-bottom: 2.5rem;
6+
padding-top: 2.5rem;
7+
width: 100%; }
8+
.esh-app-footer-brand {
9+
height: 50px;
10+
width: 230px; }
11+
.esh-app-footer-text {
12+
color: #83D01B;
13+
line-height: 50px;
14+
text-align: right;
15+
width: 100%; }

‎src/Web/WebMVC/wwwroot/css/app.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* For development environment */
2+
3+
@import url('./app.component.css');
4+
@import url('./shared/components/header/header.css');
5+
@import url('./shared/components/identity/identity.css');
6+
@import url('./shared/components/pager/pager.css');
7+
@import url('./basket/basket.component.css');
8+
@import url('./basket/basket-status/basket-status.component.css');
9+
@import url('./catalog/catalog.component.css');
10+
@import url('./orders/orders.component.css');
11+
@import url('./orders/orders-detail/orders-detail.component.css');
12+
@import url('./orders/orders-new/orders-new.component.css');

‎src/Web/WebMVC/wwwroot/css/app.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.esh-basketstatus {
2+
cursor: pointer;
3+
float: right;
4+
position: relative;
5+
transition: all 0.35s; }
6+
.esh-basketstatus-image {
7+
height: 36px;
8+
margin-top: .5rem; }
9+
.esh-basketstatus-badge {
10+
background-color: #83D01B;
11+
border-radius: 50%;
12+
color: #FFFFFF;
13+
display: block;
14+
height: 1.5rem;
15+
left: 50%;
16+
position: absolute;
17+
text-align: center;
18+
top: 0;
19+
transform: translateX(-38%);
20+
transition: all 0.35s;
21+
width: 1.5rem; }
22+
.esh-basketstatus:hover .esh-basketstatus-badge {
23+
background-color: transparent;
24+
color: #75b918;
25+
transition: all 0.35s; }

‎src/Web/WebMVC/wwwroot/css/basket/basket.component.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.esh-basket {
2+
min-height: 80vh; }
3+
.esh-basket-titles {
4+
padding-bottom: 1rem;
5+
padding-top: 2rem; }
6+
.esh-basket-titles--clean {
7+
padding-bottom: 0;
8+
padding-top: 0; }
9+
.esh-basket-title {
10+
text-transform: uppercase; }
11+
.esh-basket-items--border {
12+
border-bottom: 1px solid #EEEEEE;
13+
padding: .5rem 0; }
14+
.esh-basket-items--border:last-of-type {
15+
border-color: transparent; }
16+
.esh-basket-item {
17+
font-size: 1rem;
18+
font-weight: 300; }
19+
.esh-basket-item--middle {
20+
line-height: 8rem; }
21+
@media screen and (max-width: 1024px) {
22+
.esh-basket-item--middle {
23+
line-height: 1rem; } }
24+
.esh-basket-item--mark {
25+
color: #00A69C; }
26+
.esh-basket-image {
27+
height: 8rem; }
28+
.esh-basket-input {
29+
line-height: 1rem;
30+
width: 100%; }
31+
.esh-basket-checkout {
32+
border: none;
33+
border-radius: 0;
34+
background-color: #83D01B;
35+
color: #FFFFFF;
36+
display: inline-block;
37+
font-size: 1rem;
38+
font-weight: 400;
39+
margin-top: 1rem;
40+
padding: 1rem 1.5rem;
41+
text-align: center;
42+
text-transform: uppercase;
43+
transition: all 0.35s; }
44+
.esh-basket-checkout:hover {
45+
background-color: #4a760f;
46+
transition: all 0.35s; }

‎src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.esh-catalog-hero {
2+
background-image: url("../../images/main_banner.png");
3+
background-size: cover;
4+
height: 260px;
5+
width: 100%; }
6+
7+
.esh-catalog-title {
8+
position: relative;
9+
top: 74.28571px; }
10+
11+
.esh-catalog-filters {
12+
background-color: #00A69C;
13+
height: 65px; }
14+
15+
.esh-catalog-filter {
16+
background-color: transparent;
17+
border-color: #00d9cc;
18+
color: #FFFFFF;
19+
cursor: pointer;
20+
margin-right: 1rem;
21+
margin-top: .5rem;
22+
outline-color: #83D01B;
23+
padding-bottom: 0;
24+
padding-left: 0.5rem;
25+
padding-right: 0.5rem;
26+
padding-top: 1.5rem;
27+
min-width: 140px;
28+
-webkit-appearance: none; }
29+
.esh-catalog-filter option {
30+
background-color: #00A69C; }
31+
32+
.esh-catalog-label {
33+
display: inline-block;
34+
position: relative;
35+
z-index: 0; }
36+
.esh-catalog-label::before {
37+
color: rgba(255, 255, 255, 0.5);
38+
content: attr(data-title);
39+
font-size: 0.65rem;
40+
margin-top: 0.65rem;
41+
margin-left: 0.5rem;
42+
position: absolute;
43+
text-transform: uppercase;
44+
z-index: 1; }
45+
.esh-catalog-label::after {
46+
background-image: url("../../images/arrow-down.png");
47+
height: 7px;
48+
content: '';
49+
position: absolute;
50+
right: 1.5rem;
51+
top: 2.5rem;
52+
width: 10px;
53+
z-index: 1; }
54+
55+
.esh-catalog-send {
56+
background-color: #83D01B;
57+
color: #FFFFFF;
58+
cursor: pointer;
59+
font-size: 1rem;
60+
margin-top: -1.5rem;
61+
padding: 0.5rem;
62+
transition: all 0.35s; }
63+
.esh-catalog-send:hover {
64+
background-color: #4a760f;
65+
transition: all 0.35s; }
66+
67+
.esh-catalog-items {
68+
margin-top: 1rem; }
69+
70+
.esh-catalog-item {
71+
text-align: center;
72+
margin-bottom: 1.5rem;
73+
width: 33%; }
74+
@media screen and (max-width: 1024px) {
75+
.esh-catalog-item {
76+
width: 50%; } }
77+
@media screen and (max-width: 768px) {
78+
.esh-catalog-item {
79+
width: 100%; } }
80+
81+
.esh-catalog-thumbnail {
82+
max-width: 370px;
83+
width: 100%; }
84+
85+
.esh-catalog-button {
86+
background-color: #83D01B;
87+
border: none;
88+
color: #FFFFFF;
89+
cursor: pointer;
90+
font-size: 1rem;
91+
height: 3rem;
92+
margin-top: 1rem;
93+
transition: all 0.35s;
94+
width: 80%; }
95+
.esh-catalog-button:hover {
96+
background-color: #4a760f;
97+
transition: all 0.35s; }
98+
99+
.esh-catalog-name {
100+
font-size: 1rem;
101+
font-weight: 300;
102+
margin-top: .5rem;
103+
text-align: center;
104+
text-transform: uppercase; }
105+
106+
.esh-catalog-price {
107+
text-align: center;
108+
font-weight: 900;
109+
font-size: 28px; }
110+
.esh-catalog-price::before {
111+
content: '$'; }

‎src/Web/WebMVC/wwwroot/css/orders/orders-detail/orders-detail.component.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.esh-orders_detail {
2+
min-height: 80vh; }
3+
.esh-orders_detail-section {
4+
padding: 1rem 0; }
5+
.esh-orders_detail-section--right {
6+
text-align: right; }
7+
.esh-orders_detail-titles {
8+
padding-bottom: 1rem;
9+
padding-top: 2rem; }
10+
.esh-orders_detail-title {
11+
text-transform: uppercase; }
12+
.esh-orders_detail-items--border {
13+
border-bottom: 1px solid #EEEEEE;
14+
padding: .5rem 0; }
15+
.esh-orders_detail-items--border:last-of-type {
16+
border-color: transparent; }
17+
.esh-orders_detail-item {
18+
font-size: 1rem;
19+
font-weight: 300; }
20+
.esh-orders_detail-item--middle {
21+
line-height: 8rem; }
22+
@media screen and (max-width: 768px) {
23+
.esh-orders_detail-item--middle {
24+
line-height: 1rem; } }
25+
.esh-orders_detail-item--mark {
26+
color: #83D01B; }
27+
.esh-orders_detail-image {
28+
height: 8rem; }

‎src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.esh-orders_new {
2+
min-height: 80vh; }
3+
.esh-orders_new-header {
4+
background-color: #00A69C;
5+
height: 4rem; }
6+
.esh-orders_new-back {
7+
color: rgba(255, 255, 255, 0.4);
8+
line-height: 4rem;
9+
text-transform: uppercase;
10+
text-decoration: none;
11+
transition: color 0.35s; }
12+
.esh-orders_new-back:hover {
13+
color: #FFFFFF;
14+
transition: color 0.35s; }
15+
.esh-orders_new-section {
16+
padding: 1rem 0; }
17+
.esh-orders_new-section--right {
18+
text-align: right; }
19+
.esh-orders_new-placeOrder {
20+
float: right;
21+
margin-top: 40px;
22+
margin-bottom: 40px;
23+
background-color: #83d01b;
24+
color: #fff;
25+
padding: 10px 20px 10px 20px;
26+
border-radius: 0;
27+
border: none;
28+
width: 255px;
29+
display: inline-block;
30+
text-align: center;
31+
text-transform: uppercase;
32+
height: 45px;
33+
font-size: 16px;
34+
font-weight: normal; }
35+
.esh-orders_new-titles {
36+
padding-bottom: 1rem;
37+
padding-top: 2rem; }
38+
.esh-orders_new-title {
39+
font-size: 1.25rem; }
40+
.esh-orders_new-items--border {
41+
border-bottom: 1px solid #EEEEEE;
42+
padding: .5rem 0; }
43+
.esh-orders_new-items--border:last-of-type {
44+
border-color: transparent; }
45+
.esh-orders_new-item {
46+
font-size: 1rem;
47+
font-weight: 300; }
48+
.esh-orders_new-item--middle {
49+
line-height: 8rem; }
50+
@media screen and (max-width: 768px) {
51+
.esh-orders_new-item--middle {
52+
line-height: 1rem; } }
53+
.esh-orders_new-item--mark {
54+
color: #83D01B; }
55+
.esh-orders_new-image {
56+
height: 8rem; }
57+
58+
@media screen and (min-width: 992px) {
59+
.form-input {
60+
width: 360px;
61+
max-width: 360px; } }
62+
63+
.form-input {
64+
border-radius: 0;
65+
padding: 10px;
66+
height: 45px; }
67+
68+
.form-input-small {
69+
max-width: 100px !important; }
70+
71+
.form-input-medium {
72+
width: 150px !important; }
73+
74+
.alert {
75+
padding-left: 0px; }
76+
77+
.alert-danger {
78+
background-color: transparent;
79+
border: none;
80+
color: #fb0d0d;
81+
font-size: 12px; }

‎src/Web/WebMVC/wwwroot/css/orders/orders.component.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.esh-orders {
2+
min-height: 80vh;
3+
overflow-x: hidden; }
4+
.esh-orders-header {
5+
background-color: #00A69C;
6+
height: 4rem; }
7+
.esh-orders-back {
8+
color: rgba(255, 255, 255, 0.4);
9+
line-height: 4rem;
10+
text-transform: uppercase;
11+
text-decoration: none;
12+
transition: color 0.35s; }
13+
.esh-orders-back:hover {
14+
color: #FFFFFF;
15+
transition: color 0.35s; }
16+
.esh-orders-titles {
17+
padding-bottom: 1rem;
18+
padding-top: 2rem; }
19+
.esh-orders-title {
20+
text-transform: uppercase; }
21+
.esh-orders-items {
22+
height: 2rem;
23+
line-height: 2rem;
24+
position: relative; }
25+
.esh-orders-items:nth-of-type(2n + 1):before {
26+
background-color: #EEEEFF;
27+
content: '';
28+
height: 100%;
29+
left: 0;
30+
margin-left: -100vw;
31+
position: absolute;
32+
top: 0;
33+
width: 200vw;
34+
z-index: -1; }
35+
.esh-orders-item {
36+
font-weight: 300; }
37+
.esh-orders-item--hover {
38+
opacity: 0;
39+
pointer-events: none; }
40+
.esh-orders-items:hover .esh-orders-item--hover {
41+
opacity: 1;
42+
pointer-events: all; }
43+
.esh-orders-link {
44+
color: #83D01B;
45+
text-decoration: none;
46+
transition: color 0.35s; }
47+
.esh-orders-link:hover {
48+
color: #75b918;
49+
transition: color 0.35s; }

‎src/Web/WebMVC/wwwroot/css/shared/components/header/header.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.esh-header {
2+
background-color: #00A69C;
3+
height: 4rem; }
4+
.esh-header-back {
5+
color: rgba(255, 255, 255, 0.5);
6+
line-height: 4rem;
7+
text-transform: uppercase;
8+
text-decoration: none;
9+
transition: color 0.35s; }
10+
.esh-header-back:hover {
11+
color: #FFFFFF;
12+
transition: color 0.35s; }

0 commit comments

Comments
 (0)