smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add screen sizes

Browse Source
This commit is contained in:
prisar
2023-07-07 05:17:03 +05:30
parent 7644bd9046
commit ac81a72bb6
1 changed files with 162 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/App.css
View File

@@ -1,5 +1,5 @@
body {
background-color: rgb(247,245,249);
background-color: rgb(247, 245, 249);
color: aliceblue;
}
@@ -38,38 +38,172 @@ body {
font-weight: 900;
}
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
@media screen and (min-width: 320px) {
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: column;
}
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
@media screen and (min-width: 500px) {
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: column;
}
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
@media (min-width: 900px) {
.numeric-card {
height: 150px;
width: 200px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: row;
}
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
@media screen and (min-width: 1200px) {
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: row;
}
}
div.chart {
@@ -77,12 +211,6 @@ div.chart {
font-size: 0.7em;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: row;
}
div.bar {
background-color: DarkRed;
color: white;
@@ -91,5 +219,4 @@ div.bar {
padding-right: 1em;
margin-bottom: 2px;
text-align: right;
}
}