Style and formatting changes added to score cards
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +1,2 @@
|
|||||||
node_modules
|
ProjectSourceCode/node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
@@ -3,10 +3,8 @@
|
|||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
margin: 2.5px 2.5px; /* Remove horizontal margin */
|
margin: 5px 2.5px; /* Distance between cards and container */
|
||||||
min-height: 100px;
|
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
transition: transform 0.4s ease; /* Add transition for smooth effect */
|
transition: transform 0.4s ease; /* Add transition for smooth effect */
|
||||||
}
|
}
|
||||||
@@ -15,6 +13,7 @@
|
|||||||
transform: scale(1.05); /* Scale up by 10% on hover */
|
transform: scale(1.05); /* Scale up by 10% on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Entire Card Information Body */
|
||||||
.score-card-body {
|
.score-card-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -22,30 +21,38 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Left Side of Container (Scores) */
|
||||||
.card-team-container {
|
.card-team-container {
|
||||||
flex: 70%;
|
flex: 70%;
|
||||||
display: flex;
|
flex-grow: 1; /* Both team containers will grow to occupy equal width */
|
||||||
flex-direction: column;
|
flex-direction: column; /* Stacks each team over one another */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Right Side of Container (Time) */
|
||||||
.card-game-information-container {
|
.card-game-information-container {
|
||||||
flex: 30%;
|
flex: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
margin-left: 10px;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.team {
|
.team {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center; /* Center items vertically */
|
||||||
|
justify-content: center;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.team p {
|
.team p {
|
||||||
margin-right: 10px; /* Adjust this value to control the space between team name and score */
|
margin: 0; /* Remove default margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
#team-name {
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team img {
|
.team img {
|
||||||
height: 30px;
|
width: 20px; /* Set the width of the image to 100% of its container */
|
||||||
|
height: auto; /* Maintain the aspect ratio */
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user