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