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-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;
}
a:hover,
a:active {
color: #75B918;
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 {
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;
}

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

@ -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;
}

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

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

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}
}