154 lines
3.2 KiB
SCSS
154 lines
3.2 KiB
SCSS
.diff {
|
|
margin-bottom: 166px;
|
|
|
|
@media (min-width: 1720px) {
|
|
margin-bottom: 172px;
|
|
}
|
|
|
|
.title {
|
|
width: 60%;
|
|
margin-bottom: 65px;
|
|
|
|
@media (min-width: 1720px) {
|
|
width: 49%;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
|
|
&__grid {
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 30px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
height: 96%;
|
|
width: 5px;
|
|
border-radius: 5px;
|
|
background-color: #EDEDED;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__coll {
|
|
width: 50%;
|
|
|
|
&.left {
|
|
margin-right: 29px;
|
|
|
|
.diff__coll-title {
|
|
padding-left: 39px;
|
|
|
|
@media (min-width: 1720px) {
|
|
padding-left: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
margin-left: 29px;
|
|
|
|
.diff__coll-title {
|
|
padding-right: 39px;
|
|
|
|
@media (min-width: 1720px) {
|
|
padding-right: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&__coll-title {
|
|
margin-bottom: 38px;
|
|
}
|
|
|
|
&__item {
|
|
position: relative;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
display: flex;
|
|
gap: 11px;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
border-radius: 15px;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
margin-bottom: 35px;
|
|
cursor: default;
|
|
|
|
@media (min-width: 1720px) {
|
|
padding-top: 22px;
|
|
padding-bottom: 20px;
|
|
padding-left: 27px;
|
|
gap: 20px;
|
|
margin-bottom: 38px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
&:hover {
|
|
.diff__status::before {
|
|
scale: 1.2;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&__status {
|
|
position: relative;
|
|
height: 48px;
|
|
width: 48px;
|
|
border-radius: 5px;
|
|
flex-shrink: 0;
|
|
|
|
@media (min-width: 1720px) {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: 0% 15%;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.diff__item--done & {
|
|
background-color: #CCF9D9;
|
|
|
|
&::before {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
|
|
}
|
|
}
|
|
|
|
.diff__item--error & {
|
|
background-color: #F9CCCC;
|
|
|
|
&::before {
|
|
width: 36px;
|
|
height: 36px;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
} |