qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨chore: Sync Sass

Browse Source
This commit is contained in:
yoosangwook 2025-02-03 11:08:28 +09:00
parent 6b5d86cd2c
commit 0a1076fdfc
2 changed files with 87 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_table.scss
View File

@ -244,6 +244,9 @@ table{
&.on{ &.on{
background-color: #272727; background-color: #272727;
} }
&.wrong{
background-color: #7E3434;
}
} }
td{ td{
height: 40px; height: 40px;

168
src/styles/_test.scss
View File

@ -1,84 +1,84 @@
.test { .test {
background-color: #797979; background-color: #797979;
font: 30px sans-serif; font: 30px sans-serif;
font-style: italic; font-style: italic;
color: white; color: white;
} }
.grid-container2 { .grid-container2 {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); /* 2개의 열 */ grid-template-columns: repeat(2, 1fr); /* 2개의 열 */
grid-template-rows: repeat(6, 30px); /* 6개의 행 */ grid-template-rows: repeat(6, 30px); /* 6개의 행 */
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */ justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */ align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
gap: 5px; /* 그리드 아이템 사이의 간격 */ gap: 5px; /* 그리드 아이템 사이의 간격 */
} }
.grid-container3 { .grid-container3 {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* 3개의 열 */ grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
grid-template-rows: repeat(6, 30px); /* 6개의 행 */ grid-template-rows: repeat(6, 30px); /* 6개의 행 */
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */ justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */ align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
gap: 5px; /* 그리드 아이템 사이의 간격 */ gap: 5px; /* 그리드 아이템 사이의 간격 */
} }
.grid-container4 { .grid-container4 {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); /* 4개의 열 */ grid-template-columns: repeat(4, 1fr); /* 4개의 열 */
grid-template-rows: repeat(6, 30px); /* 6개의 행 */ grid-template-rows: repeat(6, 30px); /* 6개의 행 */
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */ justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */ align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
gap: 5px; /* 그리드 아이템 사이의 간격 */ gap: 5px; /* 그리드 아이템 사이의 간격 */
} }
.grid-container5 { .grid-container5 {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); /* 5개의 열 */ grid-template-columns: repeat(5, 1fr); /* 5개의 열 */
grid-template-rows: repeat(5, 30px); /* 5개의 행 */ grid-template-rows: repeat(5, 30px); /* 5개의 행 */
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */ justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */ align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
gap: 0px; /* 그리드 아이템 사이의 간격 */ gap: 0px; /* 그리드 아이템 사이의 간격 */
} }
.grid-item { .grid-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid black; /* 그리드 외각선 */ border: 1px solid black; /* 그리드 외각선 */
text-align: center; /* 그리드 내 가운데 정렬 */ text-align: center; /* 그리드 내 가운데 정렬 */
} }
.grid-item2 { .grid-item2 {
padding: 20px; padding: 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border: 1px solid #000; border: 1px solid #000;
} }
.grid-item3 { .grid-item3 {
padding: 20px; padding: 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border: 1px solid #000; border: 1px solid #000;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.grid-item.Y { .grid-item.Y {
background-color: #d3d0d0; background-color: #d3d0d0;
color: black; color: black;
} }
.grid-item.N { .grid-item.N {
background-color: white; background-color: white;
color: black; color: black;
} }
.grid-item.selected { .grid-item.selected {
background-color: #d3d0d0; background-color: #d3d0d0;
color: black; color: black;
} }
.grid-item.unselected { .grid-item.unselected {
background-color: white; background-color: white;
color: black; color: black;
} }