franpcode/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND
1
0
Fork 0
mirror of https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git synced 2025-10-12 23:52:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Responsive desing payment place done

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-18 23:22:32 -03:00
parent 877c358802
commit 62c38fa55c
3 changed files with 60 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
payment/css/styles.css
View File

@@ -33,6 +33,7 @@ header .logo h3 {
display: flex;
align-items: center;
margin-left: 1vw;
user-select: none;
}
header.sub-header {
background-color: #506ea7;
@@ -62,6 +63,7 @@ header.sub-header {
width: 100%;
display: flex;
flex-direction: column;
user-select: none;
}
.payment-container .column.frist-column form input[type=text] {
border: none;
@@ -83,6 +85,7 @@ header.sub-header {
}
.payment-container .column.second-column table thead {
border-bottom: 1px solid #858585;
user-select: none;
}
.payment-container .column.second-column table thead th:first-child {
text-align: initial;
@@ -112,13 +115,31 @@ header.sub-header {
margin-top: 1vh;
height: 8vh;
width: 100%;
user-select: none;
}
.payment-container .column h2 {
border-bottom: 1px solid #000;
padding-bottom: 1vh;
user-select: none;
}
.payment-container .column table {
width: 100%;
}
@media (max-width: 991.98px) {
.payment-container {
justify-content: center;
flex-direction: column;
}
.payment-container .column.frist-column, .payment-container .column.second-column {
box-sizing: border-box;
width: calc(96vw - 1vw);
margin: 0px 1vw 0px 1vw;
padding-bottom: 2vh;
}
.payment-container .column.frist-column {
margin-bottom: 2vh;
}
}
/*# sourceMappingURL=styles.css.map */

2
payment/css/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YAnFkB;EAoFlB,gBApFkB;;AAsFlB;EAEI;EAEA;EACA;;AAEA;EAzFJ;EA6FQ;;AAEA;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EA1HJ;EA8HQ;;AAEA;EACI;EAEA;;AAEA;EAEI;;AAEA;EAEI;;AAIR;EAEI;EACA;EACA;;AAKA;EAEI;;AAKA;EAEI;EACA;;AAGJ;EAEI;;AAMhB;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;;AAMR;EAEI;EACA;;AAGJ;EAEI","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YArFkB;EAsFlB,gBAtFkB;;AAwFlB;EAEI;EAEA;EACA;;AAEA;EA3FJ;EA+FQ;;AAEA;EAEI;EAEA;EACA;EAEA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EA9HJ;EAkIQ;;AAEA;EACI;EAEA;;AAEA;EAEI;EAEA;;AAEA;EAEI;;AAIR;EAEI;EACA;EACA;;AAKA;EAEI;;AAKA;EAEI;EACA;;AAGJ;EAEI;;AAMhB;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;EAEA;;AAMR;EAEI;EACA;EAEA;;AAGJ;EAEI;;;AAKZ;EAEI;IAEI;IACA;;EAII;IAEI;IApOZ;IAyOY;IACA;;EAGJ;IAEI","file":"styles.css"}

38
payment/sass/styles.scss
View File

@@ -58,6 +58,8 @@ header {
align-items: center;
margin-left: 1vw;
user-select: none;
}
}
@@ -104,6 +106,8 @@ header {
display: flex;
flex-direction: column;
user-select: none;
input[type="text"] {
border: none;
@@ -139,6 +143,8 @@ header {
border-bottom: 1px solid rgb(133, 133, 133);
user-select: none;
th:first-child {
text-align: initial;
@@ -191,6 +197,8 @@ header {
height: 8vh;
width: 100%;
user-select: none;
}
}
@@ -200,6 +208,8 @@ header {
border-bottom: 1px solid #000;
padding-bottom: 1vh;
user-select: none;
}
table {
@@ -207,4 +217,32 @@ header {
width: 100%;
}
}
}
@media (max-width: 991.98px) {
.payment-container {
justify-content: center;
flex-direction: column;
.column {
&.frist-column, &.second-column {
box-sizing: border-box;
$width: 96vw;
@include columnSize($width);
margin: 0px 1vw 0px 1vw;
padding-bottom: 2vh;
}
&.frist-column {
margin-bottom: 2vh;
}
}
}
}